ReactJs return does not render components

Question

The Console.log(key,_i) does work, but it does not render any thing.

I did try to put one more return following above question, but it does not help.


{newData?.data.forEach((x:any)=> {return (Object.keys(x).map((key:any,_i:number) => {
            console.log(key,_i)
            return (
              <Grid item xs={12}> 
                <TextField 
                  key={_i}
                  style={{ width: "100%" }}
                  required
                  label={key} 
                  onChange={handleOnchange(key)} 
                />
              </Grid> 
              )
          }))})}

It is expected to generate a text box. I did try to erase every thing in the <TextField> like key, style ,required, label, onChange . But it still does not work. It is expected to render something.

score 1 · Accepted Answer · answered Dec 07 '22 at 15:52

1

use map instead of forEach

data.map((x:any)=> {return (Object.keys(x).map(....

answered Dec 07 '22 at 15:52

Sachila Ranawaka

39,756
7
56
80

Can you explain a bit why for each does not work but map work – NOK Dec 07 '22 at 16:00
when rendering lists in templates, react only support map operator – Sachila Ranawaka Dec 07 '22 at 16:02

ReactJs return does not render components

1 Answers1