Map inside map value-CodePudding

I tried show for each item in data array only the name key I need to show it with table.

const data = [{id: "111", name: "Danny", city: "NYC"},
              {id: "222", name: "Roni", city: "LDN}, 
              {id: "333", name: "Suzi", city: "TLV",
              {id: "444", name: "John", city: "SF"}
             ]
const config = [{fieldToShow: "name"}]


  <tbody>
  {data.map((row) => {
    return (
      <tr>
        {config.map((value) => {
          return <td>{row[value.field]}</td>;
        })}
      </tr>
    );
  })}

but it not work ...

CodePudding user response：

Your config object has a key fieldToShow :

const config = [{fieldToShow: "name"}]

while you are trying to get the key field in your map. You change this line:

  return <td>{row[value.field]}</td>;

to this:

  return <td>{row[value.fieldToShow]}</td>;

CodePudding user response：

you can do like this:

export default function Test() {
  const data = [
    { id: '111', name: 'Danny', city: 'NYC' },
    { id: '222', name: 'Roni', city: 'LDN' },
    { id: '333', name: 'Suzi', city: 'TLV' },
    { id: '444', name: 'John', city: 'SF' },
  ];
  const config = [{ fieldToShow: 'name' }];

  return (
    <tbody>
      {data.map((row) => (
        <tr>
          {data.map((row) => (
            <tr>
              {config.map((value) => (
                <td>{row[value.fieldToShow]}</td>
              ))}
            </tr>
          ))}
        </tr>
      ))}
    </tbody>
  );
}