What to do with the data?

Question

React

Question about code quality.
There is a certain red component, it has a button with adding data to the database.
I split this red component into many smaller ones.
1) green is responsible for selecting the date
2) blue is for the selected elements in the checkbox
3) yellow is the text and subject
Task: By clicking on the red add button, you need to send the date, selected checkbox elements, text and subject to the server.
There are 2 exits here, as I understand it:
1) We store everything not in the state of the components, but in redux , there we make a branch store = {app:{date,checkboxes,topic,message}}
2) in the red component we create 4 arrow functions and pass them props to each child component. Well, there we already call this.props.handleChangeDate ()
Which option is preferable?
On the one hand, we litter in the editorial office, and on the other hand, we are engaged in forwarding, i.e. we create confusion. (the new programmer will have to look for the parent, he does not know where we actually change the state)
what is the callback that comes from the top level usually called?

Answer 1

It's better to store everything in the red component. It is better to describe the child interface in such a way that one hanldeChange handler is enough for all components. Components green, blue, yellow are superfluous. It's like a form, even if it contains form elements, and not incomprehensible abstractions.

<Form>
  <DatePicker />
  <DatePicker />
  <Divider />
  <CheckBox />
  <CheckBox />
  <CheckBox />
  <Divider />
  <Input />
  <TextArea />
  <Button />
</Form>

better and clearer than:

<Form>
  <DateFromToSelector />
  <FormCheckboxes />
  <Texts />
  <Button />
</Form>

And the new programmer will not have to look for anything.