How do I pass JSON with objects in objects to a component [REACT]

Question

I am new to REACT and want to do a challenge with (different) stories thats displays the stories in different cards.

So I tried to create a card component that displays title, description and difficulty. I added an object named stories

class Card extends React.Component {
render() {
    const stories = [
        {
            id: 1,
            title: 'First black story',
            desc: 'Can you solve this hard puzzle?',
            grade: 'Hard'
        },
        {
            id: 2,
            title: 'Second black story',
            desc: 'This should be easy for you!',
            grade: 'Makkelijk'
        }
    ];

I tried mapping through to object and adding all the details do elements like <h2>, <p> with map function:

return({stories,map((story, index) => {
        return (
          <div key={index}>
            <h2>name: {story.title}</h2>
            <h2>country: {story.desc}</h2>

            <hr />
          </div>
        );
      })});
}

}

export default Card;

and tried to call the cards in my Home.js with

<div id="cardsOverview">
   <Card />
   <Card />
   <Card />
</div>

But without success, what am I doing wrong? I personally think the <Card /> is not going to work that easily because REACT doesn't know what card it should load, but I want it to load every card, so why should it matter WHAT card.

Sam's answer looks like it should help you here. One thing to look out for is how you are setting your key - by using the index from map. This is generally to be avoided if possible - in your case, the stories have an id property that you should use as the key. Only use index for the key if there is no other option. — David Hall
– David Hall, Commented Sep 22, 2022 at 10:45
@DavidHall so changing the 'index' to 'id' should do the trick? — Sbaliyev
– Sbaliyev, Commented Sep 22, 2022 at 10:47
No - that is simply a best practice for working with react component keys. Sam's answer is correct - if you do not have your stories object in Home.js, you should extend your question with more details about where you expect the stories object to come from, and what you have tried already to provide it to your component. — David Hall
– David Hall, Commented Sep 22, 2022 at 10:50

Sam · Accepted Answer · 2022-09-22 10:38:37Z

2

I have a few remarks. first of all, your list of cards are defined within the card object. This seems to be not logical. You want your list of cards to be defined at a higher level, and then map over this list, generating a <Card /> for each item of your list.

If you got your setup to work as it is now (a few more syntax issues, like cards not returning everything in one tag, curly braces around your return), you would generate 3 card components, and each card creates the 3 stories, giving you 9 cards on the page.

<div id="cardsOverview">
    {
        stories.map((story, index) => <Card key={index} story={story} /> );
    }
</div>

Your card should then be able to use those props to draw a single card:

class Card extends React.Component {
    render() {
     return (
         <div key={this.props.key}>
            <h2>name: {this.props.story.title}</h2>
            <h2>country: {this.props.story.desc}</h2>
            <hr />
         </div>
     )
}

Have a look at this, and see if you get it to work.

answered Sep 22, 2022 at 10:38

Sam

3523 silver badges11 bronze badges

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

4 Comments

Sbaliyev Over a year ago

FYI the current setup is not working, I tried changing it to your code but I get an error saying that stories is not defined in Home.js

Sam Over a year ago

probably yes, you need to copy the definition of your stories variable to your Home.js file. in Home.js it does not know what the stories variable is, because you defined it in the Card component

Sbaliyev Over a year ago

it worked, thanks. Is there a way to setup the Stories object in another Stories.js file/component and extract it from there to the Home.js component? It makes no sense to have the stories in Home.js since this is just the homepage

Sam Over a year ago

That is most certainly possible and would make sense indeed. Just try googling 'How to import variables from another file in React'

Collectives™ on Stack Overflow

How do I pass JSON with objects in objects to a component [REACT]

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related