Passing props

DEMO
Everything can be taken from a man but one thing: the last of the human freedoms - to choose one’s attitude in any given set of circumstances, to choose one’s own way.
Victor E. Frankl
Man's Search for Meaning
1946
A journey will have pain and failure... But if we stop, if we accept the person we are when we fail, the journey ends. That failure becomes our destination.
Brandon Sanderson
Oathbringer
2017
It's the questions we can't answer that teach us the most. They teach us how to think. If you give a man an answer, all he gains is a little fact. But give him a question and he'll look for his own answers.
Patrick Rothfuss
The Wise Man's Fear
2011
We can pass props (properties) to a child component. This lets us break our application down into reusable components. The above example involves reusing a stateful component.
PassingProps.jsx

QuoteCard.jsx
const PassingProps = () => {
  return (
    <>
      <QuotesWrapper>
        {quotes.map((quote) => (
          <QuoteCard key={quote.id} {...quote} />
        ))}
      </QuotesWrapper>
    </>
  );
};
    
export default PassingProps;

const quotes = [
  {
    content:
      "Everything can be taken from a man but one thing: the last of the human freedoms - to choose one’s attitude in any given set of circumstances, to choose one’s own way.",
    author: "Victor E. Frankl",
    title: "Man's Search for Meaning",
    img: "/images/bookCovers/frankl-cover.jpg",
    id: 1,
    likes: 87,
    year: 1946,
  },
  {
    content:
      "A journey will have pain and failure... But if we stop, if we accept the person we are when we fail, the journey ends. That failure becomes our  destination.",
    author: "Brandon Sanderson",
    title: "Oathbringer",
    img: "/images/bookCovers/sanderson-cover.jpg",
    id: 2,
    likes: 76,
    year: 2017,
  },
  {
    content:
      "It's the questions we can't answer that teach us the most. They teach us how to think. If you give a man an answer, all he gains is a little fact. But give him a question and he'll look for his own answers.",
    author: "Patrick Rothfuss",
    title: "The Wise Man's Fear",
    img: "/images/bookCovers/rothfuss-cover.jpg",
    id: 3,
    likes: 65,
    year: 2011,
  },
];

Note: Code snippets do not include styling details unless they are the focus of the exercise.

Copyright © 2022 Explore React