React - how to set inline CSS for each element of map function?

Question

I have an application in React where I'm trying to read in data from a JSON file. The JSON file is in the following format:

[
    {
        "name": "Max",
        "age": "21",
    },

    {
        "name": "Sam",
        "age": "18",
    }

    ........
]

I have successfully read in the right data and displayed it on my screen, like this:

function foo(){
    const styling = css`
        font-size: 30px;
    `;

    return(
        <div>
            {people.map((person, i) => <Format key={i} {...person} css={styling}/>)}
        </div>
    );
}

Although all the information correctly displays on the screen, the styling is not getting applied to each person. How could I change this?

EDIT

Format component:

function Format({name, age}){
   return (
      <div>
         <h1>{name}</h1>
         <h2>{age}</h2>
      </div>
   );
}

You using any library for CSS ? i don't think there's any prop named css by default and also you're not using the passed prop anywhere — Code Maniac
– Code Maniac, Commented Feb 17, 2020 at 10:10

gnujoow · Accepted Answer · 2020-02-17 10:21:50Z

4

function Format({name, age, css}){
   return (
      <div css={css}>
         <h1>{name}</h1>
         <h2>{age}</h2>
      </div>
   );
}

you passed styled to your component but you didnt use them in your child component

and plus using idx as key is not the best practice. following article explains why. https://reactjs.org/docs/lists-and-keys.html

if name is unique you can pass each items name to mapped children.

edited Feb 17, 2020 at 10:21

answered Feb 17, 2020 at 10:11

gnujoow

3641 gold badge3 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

React - how to set inline CSS for each element of map function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related