Working With React Props The Right Way

If you are new to React and you are working with 'components' for the first time, I don't know if it was just me but it took me a while to understand the movement flow of 'props' and looking back it could of been a lot simpler, if I understood these starting points first.

What are Props in React?

Props in React are used to pass data from one parent component to it's children component(s) and vice versa. Props allow data to be dynamic within your application as they travel to new components. And to reiterate, components can be summed to files of encapsulated logic, that has the ability of being reusable.

In my code I'm accessing the data I've fetched from an API I created and with the array of data objects returned, I'll be using JavaScript's .map() function to render each card out individually.

I have the component placed with the parentheses of the return function and I use dot notation to access individual data about each data point I'm looking for.

const cardRender = tarots.map((tarot) => {
        return (
            <TarotCard
                key={tarot.id}
                card_name={tarot.card_name}
                image={tarot.image}
                description={tarot.description} />
        )
      })

I started off with passing the data from the parent of TarotCard, which was Home and now it's time for me to work in the TarotCard component itself and restructure the data I'm passing down.

I want to highlight a tidbit of keeping your naming conventions relatively consistent. To the left of the equal sign you are free to name this value anything of your pleasing, but keep in mind this is how you will have to intake your data from the component you are sending it to.

What is Destructuring?

"To destructure means to dismantle the structure of something. In JavaScript, this structure could be an array, an object, or even a string where the properties that make up the structure would be used to create a new identical structure (the properties can be altered)."

In the function TarotCard, as an argument, I am passing into it all the data we placed in the TarotCard component from the Parent directory {card_name, image, description}.

The magic of this all, is that TarotCard has no direct access to the API I am using, but because we passed down data from the parent directory, now we can access the data from here and keep the information on the tarot cards dynamic, based off of changes in the database.

return (
        <div className="main-container">
          <div className="minor-container">
            <div className="tarot-list" >
              <div className="card">
                <img className="card-img-top" src={image} 
                alt={card_name}></img>
                <h5 className="card-title">{card_name}</h5>
                <ReadMore >
                  {description}
                </ReadMore>
             </div>
          </div>
        </div>
    </div>
   )

To create my tarot cards I have "main-container" that is the black border around my cards, the 'minor-container' that is the victorian print overlay and finally a div that is the card container that will be the parent of the details of the card.

To use props with an image tag, I give it a class name that makes targeting easier down the road, and then as the source I pass the data object "image". So now the source will populate with whatever combination of strings sent through my seeded data. I also provide an alt name for accessibility reasons, and for this, just pass down the card_name object.

I essentially do this to the rest of the inputs I need dynamic data for and in my case the description data is wrapped in tags that enforce text character limiting upon initial render.

If all the data is fetched correctly, passed down correctly, and accepted properly your DOM should render the data you set out to retrieve! Like so...

Resources

JavaScript ES6