How to organize the interaction of components in React?

Question

JavaScript

I looked at a couple of guides, a couple of screencasts and some mess in my head ...
For example, there is a survey form with inputs in the App application . Standard radio button
The radio button component receives an array with a list when called, puts it in its state and renders. When one of the items is selected , the state changes where the current item is marked.
Actually questions:

• how to insert a new item into the list? I marked it with a ref when the component was called and kicked it with setState () .
  
• How to correctly track a click on a selector? Pass a callback and process it in the props of the component?
  

Accordingly, with a binding to the parent (i.e. to App ).
PS
So far, pure React without Redux or Flux .
PSS
If you can advise what to start-see in addition to the docks, I will be glad.

Answer 1

I marked it with a ref when calling the component and kicked it with setState()

It's not worth doing that. setState: this is still an internal method of the component. Just do a rerender with the new array.
Yes, pass prop onClick from the parent and already hang it on the necessary components.