https://github.com/zeyadetman/howmanybooks
This is a tut repo to understand how to pass state between components in reactjs
https://github.com/zeyadetman/howmanybooks
Last synced: about 1 month ago
JSON representation
This is a tut repo to understand how to pass state between components in reactjs
- Host: GitHub
- URL: https://github.com/zeyadetman/howmanybooks
- Owner: zeyadetman
- Created: 2018-07-24T21:55:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T08:27:52.000Z (almost 3 years ago)
- Last Synced: 2023-03-03T13:51:28.375Z (over 2 years ago)
- Language: JavaScript
- Homepage: https://zeyadetman.github.io/howmanybooks/
- Size: 3.38 MB
- Stars: 13
- Watchers: 2
- Forks: 13
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to pass state between components in reactjs (Full Code)
In this post, i'll explain how to pass a state between components in Reactjs.
We'll build a small 'How many books did you read?' app, in this application, we
have two main components one big called 'Library' and another small 'Book', we have 3 books in the library state and each book has its own state. check any book to count as read. [try the app here](https://zeyadetman.github.io/howmanybooks/)
**Let's begin with code:**
## Passing state from parent to child
In our Library component we have this state
```js
this.state = {
reads: 0,
books: [
{
name: 'Zero to one',
isbn: '9780804139298',
author: 'Peter Thiel',
cover: 'https://images.gr-assets.com/books/1414347376l/18050143.jpg',
status: false
},
{
name: "The Manager's Path",
isbn: '9781491973899',
author: 'Camille Fournier',
cover: 'https://images.gr-assets.com/books/1484107737l/33369254.jpg',
status: false
},
{
name: 'Calculus, Better Explained',
isbn: '9781470070700',
author: 'Kalid Azad',
cover: 'https://images.gr-assets.com/books/1448590460l/27993945.jpg',
status: false
}
]
};
```
and want to create `this.state.books.length` - as a number - `Book` components each have props from the `books` array of the `Library` component's state. We have to deal with the two components.
**First** with the parent, we have to create the `Book` component `this.state.books.length` - as a number - times, and pass our diffrent values to them Like this:
[Full Code here](https://github.com/zeyadetman/howmanybooks/blob/master/src/components/Library/Library.jsx)
```js
{
this.state.books.map((_book, _id) => {
return (
);
});
}
```
_Note_ ignore `handleCounter` for now.
**Second** with the child `Book`, we have the values from parent, let's use them:
[Full code here](https://github.com/zeyadetman/howmanybooks/blob/master/src/components/Book/Book.jsx)
```js
...
render() {
return (
```
you need to bind the function first, then update the `Book` state with the new status, after updating the child state we'll update the state of the parent `Library` like this:
```js
handleChange() {
this.setState({status: !this.state.status}, this.updateLibraryCount);
}
updateLibraryCount() {
this.props.handleCounter(this.state);
}
```
In `updateLibraryCount` we used `handleCounter` function of the `Library` as a prop, then passed the `Book` state to it, Now the `Library` sees the `Book` state, Great! let's use it.
```js
handleCounter(_State) {
//Get the index of this book by searching by its unique isbn
const ObjNum = this.state.books.findIndex(
_book => _book.isbn === _State.id
);
//then update its value in the Library component
this.setState(
{
books: update(
ObjNum,
{...this.state.books[ObjNum], status: _State.status},
this.state.books
)
},
() => {
//this is a callback to handle the new change of the book status and increment the reads
const _read = this.state.books.filter(_book => _book.status === true)
.length;
this.setState({reads: _read});
}
);
}
```
I hope you're understand how to pass the state from the parent to child and vice versa, Here's the [full code](https://github.com/zeyadetman/howmanybooks), and this is the [original post on my blog](https://zeyadetman.github.io/projects/2018/07/25/How-to-pass-state-between-components-in-reactjs.html). If you have questions, feel free to ask in comments or [email](zeyadetman@gmail.com).