in

React basics: Passing data between components


Passing data between components in React is a very powerful concept.

In this article, we’ll look at the following two things:

  • Sending data from a parent to a child
  • Sending data from a child to parent

For this concept, we’ll need to use the useState hook. You haven’t seen that hook until now. I will write about it in detail another time.

Our result of today will look like this:



Sending data from a parent to a child component in React

The most effortless data flow in React is passing data top-down so from a parent component to the child components.

Let’s use our current example as a starting point.

Download the GitHub repo

In this repo, we build a simple bookshelf with a couple of books on it.

In the last example, we looped our books, but we want to pass these books as an object.

We can pass them to our bookshelf by setting the params like so:

<Bookshelf books={books}></Bookshelf>
Enter fullscreen mode

Exit fullscreen mode

Then all we need to do is change our bookshelf code to look like this:

import Book from './Book';

export default function Bookshelf({ books }) {
  return (
    <div>
      {books.map((book) => (
        <Book title={book.title} key={book.id} />
      ))}
    </div>
  );
}
Enter fullscreen mode

Exit fullscreen mode

This separates our data a bit more, and we can create multiple bookshelves with their own set of books now.

The cool part about doing this is that it can also be done on a specific action.

Let’s head back to our App.js file and set a new state to show you what I mean by that.

const [books, setBooks] = useState([]);
Enter fullscreen mode

Exit fullscreen mode

Note we named this books as well, so rename the top data set as booksData

Now we can add a button that onClick will load our books.

<button onClick={() => setBooks(booksData)}>Load the books</button>
Enter fullscreen mode

Exit fullscreen mode

And there you go now our books are only loaded when we click the button.



Sending data from a child to a parent component in React

Now that we can send data from our parent component to our child let’s see how it would work the other way around.

What we want to achieve is that we have an option to know which book was clicked.

However, for this approach, the parent component must have a way to receive this data.

Let’s open up our Bookshelf.js code as this acts as our parent for the actual books.
Add a new state to keep track of the current book.

const [currentBook, setCurrentBook] = useState('');
Enter fullscreen mode

Exit fullscreen mode

Then we can show the current book if it’s set:

{currentBook && <h1>Currently reading: {currentBook}</h1>}
Enter fullscreen mode

Exit fullscreen mode

And the last thing we want to do is pass the set function to our book component like this:

<Book
  setCurrentBook={setCurrentBook}
  title={book.title}
  key={book.id}
/>
Enter fullscreen mode

Exit fullscreen mode

Inside the book component, we need to accept this function as a parameter.
And we can add an onClick handler to invoke this function and pass the title back.

export default function Book({ title, setCurrentBook }) {
  return <div onClick={() => setCurrentBook(title)}>{title}</div>;
}
Enter fullscreen mode

Exit fullscreen mode

There you go. We can now bind data in two ways.
From parent to child, and the other way around.

You can find the complete code on GitHub.



Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter





Source: https://dev.to/dailydevtips1/react-basics-passing-data-between-components-1m6n

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Block Lists by Block Party — Block Twitter trolls in bulk

An open social network where anyone can share their ideas and opinions