`javascript` Can we use map function again using map function argument value?

Question

console.log(materialIngredientDetail)

[
    {
        "content": "asd",
        "type": "one",
        "certificationNum": "1123-522",
        "functionalList": [
            {
                "id": 132,
                "valueUnit": "mg",
                "functionalDisplayTxt": "hi"
            },
            {
                "id": 133,
                "valueUnit": "mg",
                "functionalDisplayTxt": "ww"
            },
            {
                "id": 134,
                "valueUnit": "mg",
                "functionalDisplayTxt": "ee"
            },
            {
                "id": 135,
                "valueUnit": "mg",
                "functionalDisplayTxt": "ff"
            }
        ]
    },
    {
        "content": "qwe",
        "type": "two",
        "certificationNum": "421-123",
        "functionalList": [
            {
                "id": 129,
                "valueUnit": "mg",
                "functionalDisplayTxt": "aa"
            },
            {
                "id": 130,
                "valueUnit": "mg",
                "functionalDisplayTxt": "bb"
            }
        ]
    }
]

I am trying to display this in JSX syntax using the map function.

  <div>
        {materialIngredientDetail.map((Fields, index) => (
          <Fragment key={`${Fields}~${index}`}>
            <Card title={`${Fields.type} - ${Fields.certificationNum} - ${Fields.content}`}>
            {Fields.functionalList.map((value, key) => {
                <> 
                <p>{value.id}</p>
                <p>{value.functionalDisplayTxt}</p>
                <p>123</p>
                <p>{value.valueUnit}</p>
                </>
            })}
            </Card>
          </Fragment>
        ))}
      </div>

The problem is that the output is normal and there are no errors, but the data values are not output in the code part here.

    {Fields.functionalList.map((value, key) => {
                <>
                <p>{value.id}</p>
                <p>{value.functionalDisplayTxt}</p>
                <p>123</p>
                <p>{value.valueUnit}</p>
                </>
            })}

Is it not possible to use the map function again using the InputFields argument value?
How should I modify the code?

`\`${Fields}~${index}\`` is not a very good key. `Fields` is an object so these will look like `[object Object]~0`. You're also missing a `key` on your inner `map` fragment — Phil, Apr 06 '22 at 05:31
@Phil Yep, I'll keep that in mind. Any idea why the output is not working? — minsu, Apr 06 '22 at 05:32

score 2 · Accepted Answer · answered Apr 06 '22 at 05:34

You are not returning the jsx from second map. try below listed code

{Fields.functionalList.map((value, key) => {
                        return (<>
                        <p>{value.functionalDisplayTxt}</p>
                        <p>123</p>
                        <p>{value.valueUnit}</p>
                        </>)
                    })}

OR

{Fields.functionalList.map((value, key) => (<>
                        <p>{value.functionalDisplayTxt}</p>
                        <p>123</p>
                        <p>{value.valueUnit}</p>
                        </>)
                    )}

`javascript` Can we use map function again using map function argument value?

1 Answers1