let an array show up in jsx

Question

How do I let a variable amount of array's show up? I should give a list on the webpage with all the elements of the array.

I tried this:

cons function = () =>{for (let i = 0; i < array.length; i++) {
    <li>
        <p>{array[i]}</p>
    </li>
 }}

and call it like this:

const page = () => {
    return ( 
         <div>
            <ul>
                <Classes/>
            </ul>
        </div>
     );
}

Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Jay, Nov 24 '22 at 11:08

Neo · Answer 1 · 2022-11-24T13:04:41.460

0

you can do this like this

const array = [1,2,3]

      <ul>
        {array.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>

edited Nov 24 '22 at 13:04

answered Nov 24 '22 at 11:07

Neo

467
1
3
17

score 0 · Accepted Answer · answered Nov 24 '22 at 11:11

const page = () => {
    return ( 
         <div>
            <ul>
               {array.map((item)=>{
                 return (
                  <li>{item}</li>
                 )
               })}
            </ul>
        </div>
     );
}

you can use this to show array item in jsx

let an array show up in jsx

2 Answers2