Using JavaScript map methods within a React file

Question

I am writting this code inside a JSX file.

I am trying to loop through an array of objects and render some of its elements in the browser using React JSX. I am also using a conditional statement. My code is as follow :

const Users = [
   {
       firstName: 'Peter',
       lastName: 'Parker',
       age: 17
   },
   {
       firstName: 'Bruce',
       lastName: 'Wayne',
       age: 35
   }    
];

const FormatName = (user) => {
    return user.firstName + ' ' + user.lastName
}

const Greetings = (users) => {
    users.map((person) => {
        if (person.age >= 18) {
            return <h1>{FormatName(person)}is an adult</h1>
        }
        return <h1>{FormatName(person)} is a minor</h1>
    })
    
}

ReactDOM.render(
    Greetings(Users),
    document.getElementById('root')
)

My issue is within the Greeting function. If I write a console.log, I can see that my object is being read but for some reason I can't add it to the DOM.

If someone could give me a hand, it would be much appreciated!

Your question title should be: Adding element to the DOM using map() function — Masood
– Masood, Commented Apr 18, 2021 at 17:02

Medi · Accepted Answer · 2021-04-18 17:12:34Z

1

Change Greetings component to:

const Greetings = (users) => {
    return(users.map((person) => {
        if (person.age >= 18) {
            return <h1>{FormatName(person)}is an adult</h1>
        }
        return <h1>{FormatName(person)} is a minor</h1>
    }));
    
}

and ReactDOM.render to:

ReactDOM.render(
    <Greetings users={users} />,
    document.getElementById('root')
)

answered Apr 18, 2021 at 17:12

Medi

1,0362 gold badges9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drenhat Over a year ago

Hey Medi! Thanks a lot for your answer. For some reasons, the Greetings functions didn't render with the argument (users). I had to do as follow : const Greetings = () => { return(users.map((person) => { if (person.age >= 18) { return <h1>{FormatName(person)}is an adult</h1> } return <h1>{FormatName(person)} is a minor</h1> })); }

Collectives™ on Stack Overflow

Using JavaScript map methods within a React file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related