Map Filter in React. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Question

function Main(){
    // create an array that holds objects
    const people = [
        {
            firstName: 'Fathi',
            lastName: 'Noor',
            age: 27,
            colors: ['red', 'blue'],
            bodyAttributes: {
                weight: 64,
                height: 171
            }
        },
        {
            firstName: 'Hanafi',
            lastName: 'Noor',
            age: 26,
            colors: ['white', 'black'],
            bodyAttributes: {
                weight: 62,
                height: 172
            }
        }
    ]

    return(
        <main>
            <div>
                /* display person age equal to 27 using filter using ES6 arrow */
                {people.filter(person => person.age == 27)}
            </div>
        </main>
    )
}

I'm very new to react and the use of map instead of a normal loop function.

When I run this code it gave me this error (as displayed below)

Can you guys teach me the right way of how to display all data of a person when filtered by age equal to 27?

You try to return an Object this is not possible – Antoni Jan 20 '20 at 08:50 — Antoni, Jan 20 '20 at 08:50

Antoni · Accepted Answer · 2020-01-20T10:12:24.617

4

You try to return an Object and this is not possible.


function Main(){
    // create an array that holds objects
    const people = [
        {
            firstName: 'Fathi',
            lastName: 'Noor',
            age: 27,
            colors: ['red', 'blue'],
            bodyAttributes: {
                weight: 64,
                height: 171
            }
        },
        {
            firstName: 'Hanafi',
            lastName: 'Noor',
            age: 26,
            colors: ['white', 'black'],
            bodyAttributes: {
                weight: 62,
                height: 172
            }
        }
    ]

    const filterdPeople = people.filter(person => person.age == 27)

    return(
        <main>
            <div>
                {filterdPeople.map(person => {
                  return (
                    <div key={person.lastName}>
                      <p>First name: {person.firstName}</p>
                      <p>Last name: {person.lastName}</p>
                      <p>Age: {person.age}</p>
                      <p>Colors: {person.colors.map(color => (<span>{`${color}, `}</span>))}</p>
                     <p>
                      <span>Body Attributes: </span>
                      <span>Weight: {person.bodyAttributes.weight}</span>
                      <span>Height: {person.bodyAttributes.height}</span>
                     </p>
                   </div>
                  )
                })}
            </div>
        </main>
    )
}

edited Jan 20 '20 at 10:12

answered Jan 20 '20 at 08:51

Antoni

1,316
2
16
42

It works! Thanks! Btw, How I can display all the data of **filtered** person instead just their `firstname` – user3657273 Jan 20 '20 at 08:57
@user3657273 Look at the snippet I updated it. You can do this like this. – Antoni Jan 20 '20 at 09:00
1

It works perfectly. Btw your code is missing close bracket for map `)`. Should be `...))}` instead of `...)}`. Just add one more closed bracket after ****. Thanks! – user3657273 Jan 20 '20 at 09:32
1

btw what does it means by `Each child in a list should have a unique "key" prop.`. The console gives me this error although the codes work fine. – user3657273 Jan 20 '20 at 09:47
1

This works but it's inefficient. I suppose it's negligible with a small array but at scale this would not be a great approach. You are iterating over the same data 2 times. – zero_cool Sep 07 '22 at 20:46
1

@zero_cool, thats true you could also check while map and just return an null if the person has a different age than 27. – Antoni Sep 08 '22 at 06:06

leverglowh · Answer 2 · 2020-01-20T10:14:16.280

1

You have to map the array. See this doc.

For each person, you decide how to display each field, here I used <p> tags, you can display them in a table, or in a custom card.. Your choice!

Remember that inside {} brackets goes Javascript expressions while in () goes JSX, very similar to HTML tags as you can see!

Read the documents, follow a tutorial, it'll help a lot!

{people.filter(person => person.age == 27).map(person => { return(
    <div>
      <p>First name: {person.firstName}</p>
      <p>Last name: {person.lastName}</p>
      <p>Age: {person.age}</p>
      <p>Colors: {person.colors.map(color => (<span>{color+" "}</span>)}</p>
      <p>
        <span>Body Attributes: </span>
        <span>Weight: {person.bodyAttributes.weight}</span>
        <span>Height: {person.bodyAttributes.height}</span>
      </p>
    </div>
)})}

edited Jan 20 '20 at 10:14

answered Jan 20 '20 at 08:59

leverglowh

734
1
7
23

it won't work unless I put **return** here `.map(person => { return (`. If not it will give me this error saying `Expected an assignment or function call and instead saw an expression no-unused-expressions` at line of code `{people.filter(person => person.age == 27).map(person => {(`. But anyway, thanks for the `doc` link you provide above. Really helpful! – user3657273 Jan 20 '20 at 09:30
ah yes I forgot the return sorry, didn't try it first. Glad you worked it out! – leverglowh Jan 20 '20 at 09:48
@user3657273 you should know that react is intelligent and instead of rerendering everything when something is changed, it checks every key, very fast, and decide which part to re-render. Check the .8 part of the page! – leverglowh Jan 20 '20 at 09:51
Oh. Okay. It makes sense. Every data must have a unique key or ID. Migrating from PHP to fully Javascript-based web development really did mess me up quite big time. Anyway thanks for the help! Appreciate it. – user3657273 Jan 20 '20 at 10:03

score 1 · Answer 3 · answered Jan 20 '20 at 09:10

function Main(){
    // create an array that holds objects
    const people = [
        {
            firstName: 'Fathi',
            lastName: 'Noor',
            age: 27,
            colors: ['red', 'blue'],
            bodyAttributes: {
                weight: 64,
                height: 171
            }
        },
        {
            firstName: 'Hanafi',
            lastName: 'Noor',
            age: 26,
            colors: ['white', 'black'],
            bodyAttributes: {
                weight: 62,
                height: 172
            }
        }
    ]

    return(
        <main>
            <div>
                /* display person age equal to 27 using filter using ES6 arrow */
                <table>
                <tr>
                <th>firstName</th>
                <th>lastName</th>
                <th>age</th>
                <th>colors</th>
                <th>bodyAttributes<th>
                </tr>
                {people.filter(person => person.age == 27).map(item=>{
                    return(
                        <tr>
                           <td>{item.firstName}</td>
                           <td>{item.lastName}</td>
                           <td>{item.age}</td>
                           <td>
                           <ul>
                             {
                                 item.colors.map(color=>{
                                     return <li>{color}</li>
                                 })
                             }
                           </ul>
                           {}
                           </td>
                           <td>
                           <ul>
                             <li>W:{item.bodyAttributes.weight}</li>
                             <li>H:{item.bodyAttributes.height}</li>
                           </ul>
                           </td>
                        </tr>
                    )
                })}
              </table>
            </div>
        </main>
    )
}

Thanks! It works too. Much more easy for the eye to read in table form — user3657273, Jan 20 '20 at 09:48

Map Filter in React. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

3 Answers3