How to change rendered element?

Question

React

The application has a component in which there are inputs and a field for loading an image. When the add button is clicked, we take all the data from the fields, generate an id and pass it through props to the parent that is connected to the store and passes all the data to it. The parent component takes the element id and passes it to the component that is already rendering each element. You need to somehow make it possible to change the element. So far, only the idea came to mind to take all the data from the block and transfer it to the store . But there are doubts about the implementation, can anyone suggest how it would be better to implement it?<inputs />
<Inputs container/>
<bookList/><book/>
<inputs/>

Answer 1

when you click on the add button, you should have an action that will bring the data of the book to the reducer that will return the new state of the store, the container of the books you have must be subscribed to the store, and it is to the books array, when changing which the component will be re-rendered, and in the render it is simple need to map this.props.books

Answer 2

You have the first few options
. The first is to pass the function through the props in and then in and call the this.props.myFunk function in the component, passing in the necessary variables.
In this way, you can transfer data to parents. But it's not the prettiest way
. The second way is to use redux. Put data during processing into and pull out of store into .
And the third option is to use Contex. The least used method in my opinion. https://habrahabr.ru/post/266407/ a great article that will answer all questions about the react context.
In my opinion, if you need a quick solution, use the first method, but redux is more correct.