有没有办法在地图函数之外传递参数 - ReactJS - Typescript

Question

At the moment i get from the Back End an array of objects that looks like this :

const myArr = [ 
   { 
    A: "Ananas", 
    B: "Banana", 
    C: "Citroen"
   }
]

I want to display a single JSX select menu per row with the options from the Array Ananas , Banana , Citroen . That's why I am using this method:

<Select onChange={(e: any) => handleChange(e)}>
   {myArr [0] &&
    Object.entries(myArr [0]).map(([key, value]) => (
     <MenuItem value={value}>{value}</MenuItem>
   ))}
</Select>

But the thing is that in order to keep the good JSX structure I have to keep the Select outside of my .map() function otherwise I will have many menus if it is inside.

My ultimate goal is to pass the key parameter from the .map() function back to the Select .

<Select name={key} onChange={(e: any) => handleChange(e)}>

EDIT : So behind the scenes it will look like :

<Select name="A"> 
  <MenuItem value="Ananas">Ananas</MenuItem>
  <MenuItem value="Banana">Banana</MenuItem>
  <MenuItem value="Citroen">Citroen</MenuItem>
</Select>

<Select name="B"> 
  <MenuItem value="Ananas">Ananas</MenuItem>
  <MenuItem value="Banana">Banana</MenuItem>
  <MenuItem value="Citroen">Citroen</MenuItem>
</Select>

<Select name="C"> 
  <MenuItem value="Ananas">Ananas</MenuItem>
  <MenuItem value="Banana">Banana</MenuItem>
  <MenuItem value="Citroen">Citroen</MenuItem>
</Select>

EDIT 2.0 : If we wrap everything into one loop so that we can have access to everything like this :

   { myArr [0] &&
      Object.entries(myArr [0]).map(([key, value]) => (
       <Select name ={key} onChange={(e: any) => handleChange(e)}>
         <MenuItem value={value}>{value}</MenuItem>
       </Select>
   ))}

The render result is looking like this :

And this is something that we defenately do not want to see

I do not know if this is possible, but still I prefer to ask. I hope there is someone that can give me an inside of the issue or at least a way to fix my issue. Huge thanks!

Answer 1

Looks like you'll need a nested map() . One on the Object.keys() to create the select elements and one on the Object.values() to populate each select.

The snippet below achieves this using Object.entries() and passing the entries array on to the inner map() .

const myArr = [ 
   { 
    A: "Ananas", 
    B: "Banana", 
    C: "Citroen"
   }
]

{
  myArr[0] && Object.entries(myArr[0]).map(([key], _, entries) => (
    <Select key={key} name={key}>
      {entries.map(([, value]) => (
        <MenuItem value={value}>{value}</MenuItem>)
      )
      }
    </Select>)
  )
}

 const App = () => { const myArr = [{ A: "Ananas", B: "Banana", C: "Citroen" }]; const handleChange = e => { console.log(`${e.target.name}: ${e.target.value}`); }; return ( <div> {myArr[0] && Object.entries(myArr[0]).map(([key], _, entries) => ( <select key={key} name={key} onChange={handleChange}> {entries.map(([, value]) => ( <option value={value}>{value}</option>) ) } </select>) )} </div> ); } ReactDOM.render( <App />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

As a suggestion from @Yoshi this is the correct following answer to my problem. Because i am importing my static row names from another file like this :

textDisplay.js

 export default [
       {
         label: 'Fruits',
         required: true,
       },

       {
        label: 'Fruits 2',
        required: true,
       },

       {
       label: 'Fruits 3',
       required: true,
       },
    ]

So that i can have a structure to display like the following picture :

@Yoshi Here's the idea: When we map over textDisplay with: textDisplay.map((column, i) => (...) we have an index i, this will be 0, 1, 2. What we need to do is, get the correct key from myArr by using that index.

 // importing our text data to display 
    import textDisplay '../../textDisplay.js'
    const foo = () => {
      // incoming data
      const myArr = [
        {
          A: "Ananas",
          B: "Banana",
          C: "Citroen"
        }
      ];
    
      const items = myArr[0];
      const keys = Object.keys(items);
      const values = Object.values(items);
    
      return (
        <List>
          {textDisplay.map((column, i) => (
            <ListItem key={column.keyValue}>
              <ListItemText>
                {column.label} {column.required ? '*' : ''}
              </ListItemText>
              <FormControl className={classes.formControl}>
                <Select name={keys[i]} onChange={(e: any, id) => handleChange(e, id)}>
                  {values.map(value => (
                    <MenuItem value={value}>{value}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </ListItem>
          ))}
        </List>
      );
    };