How to display arrays as Jsx elements in reactjs

Question

There is this users array in which the user names are stored in the photo are split from the photo array and i want to display the array results as buttons are displayed . The code snippet is below

let users: string[] = [];
const setUserNames = photo.filepath.split("_")[1];
users.push(setUserNames);
console.log(`Name ->`, users);
return (
   <IonRow>
     {users.map((users, index) => (
        <IonButton key={index}>{users}</IonButton>
      ))}
    </IonRow>
)

What does the `console.log(users)` line print? It would be helpful if you could provide some more info, what you are trying to achieve. :) — Romit, Oct 01 '20 at 10:20
It’s not clear what you are trying to do which isn’t being done already. But you will only ever have 1 user in the users array, and consequently only one button, because you are only pushing the element at index [1]. If there are multiple usernames in the file name then you need to add them all to your users array. — Linda Paiste, Oct 01 '20 at 10:50

score 0 · Answer 1 · answered Oct 01 '20 at 10:48

Be careful,

users.push(setUserNames) is mutable and doesn't adhere to the way data is changed in React. You need to change user using useState and spread operators.

Moreover, I'd advise you do all your array building in the seperate function and return a user array and then set that array to some state using useState.

Then start building the UI using JSX

Something like this.

const SomeCom = (props) => {
    const [users, setUsers] = useState(buildUserArray(props.photos))
    return (
        users.map(() => {
            // Render your JSX
        })

    )
}

Hey the function buildUserArray how to create that ? – KUSHAD Oct 02 '20 at 02:27 — KUSHAD, Oct 02 '20 at 02:27

How to display arrays as Jsx elements in reactjs

1 Answers1