Функция map не срабаотывает если её в TextField сделать в отдельном файле material-ui

Рейтинг: 0Ответов: 1Опубликовано: 15.03.2023

Есть два переключателя, первый переключатель работает корректно, второй переключатель не срабатывает. Разница только в том, что во втором переключатели я вынесла функцию map в отдельный файл. Можно ли исправить, чтобы во втором варианте тоже срабатывало? https://codesandbox.io/s/green-snow-bmbcn2?file=/src/Test.js введите сюда описание изображения

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import MapCastom from "./MapCastom";

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "฿"
  },
  {
    value: "JPY",
    label: "¥"
  }
];

export default function SelectTextFields() {
  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          defaultValue="EUR"
          helperText="Please select your currency"
        >
          {currencies.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>

      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          defaultValue="EUR"
          helperText="Please select your currency"
        >
          <MapCastom data={currencies} />
        </TextField>
      </div>
    </Box>
  );
}


import React from "react";
import MenuItem from "@mui/material/MenuItem";

const MapCastom = ({ data }) => {
  return (
    <>
      {data.map((option) => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
    </>
  );
};

export default MapCastom;
reactjs mui material-ui
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Неправильно был вынесен компонент, фикс:

import React from "react";
    import MenuItem from "@mui/material/MenuItem";
    import TextField from "@mui/material/TextField";
    
    const MapCastom = ({ data }) => {
      return (
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          defaultValue="EUR"
          helperText="Please select your currency"
        >
          {data.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      );
    };
    
    export default MapCastom;

import * as React from "react";
    import Box from "@mui/material/Box";
    import TextField from "@mui/material/TextField";
    import MenuItem from "@mui/material/MenuItem";
    import MapCastom from "./MapCastom";
    
    const currencies = [
      {
        value: "USD",
        label: "$"
      },
      {
        value: "EUR",
        label: "€"
      },
      {
        value: "BTC",
        label: "฿"
      },
      {
        value: "JPY",
        label: "¥"
      }
    ];
    
    export default function SelectTextFields() {
      return (
        <Box
          component="form"
          sx={{
            "& .MuiTextField-root": { m: 1, width: "25ch" }
          }}
          noValidate
          autoComplete="off"
        >
          <div>
            <TextField
              id="outlined-select-currency"
              select
              label="Select"
              defaultValue="EUR"
              helperText="Please select your currency"
            >
              {currencies.map((option) => (
                <MenuItem key={option.value} value={option.value}>
                  {option.label}
                </MenuItem>
              ))}
            </TextField>
          </div>
    
          <div>
            <MapCastom data={currencies} />
          </div>
        </Box>
      );
    }