0

I have components App, TextBox, and Toolbar. TextBox is draftjs component, so it is basically textarea with a lot of features. Toolbar controls TextBox.

//render in App 
return (
...
<TextBox changeTextBox={this.changeTextBox} ... />
<TextBox changeTextBox={this.changeTextBox} ... />
<Toolbar data={this.state.toolbarData} />
...
)

But there don't have to be only 2 TextBox (it depends on the user). There should be one Toolbar for every TextBox, that is using function from actual TextBox. As I said - TextBox has a lot of features. So I don't think it would be good idea to turn App and TextBox into the same component. But I need Toolbar to use some functions from TextBox. Could I do this - when I click on the TextBox changeTextBox is called with an argument, that is an object, which contains some functions from TextBox, and then the changeTextBox in App will change actual Toolbar and this.state.toolbarData, so Toolbar can control the TextBox. It is working, but it doesn't feel right. Is it a good practice or should I use something else?

K.Dᴀᴠɪs
  • 9,945
  • 11
  • 33
  • 43
Reenergy
  • 55
  • 1
  • 7
  • The question is a bit hard to understand. Can you provide the relevant code? Generally speaking try to split your consideration into categories like UI, state, behavior. It sounds you are trying to control internal state of a component if it is the case maybe consider lifting state up https://reactjs.org/docs/lifting-state-up.html or use a library like redux – Moti Korets Mar 21 '18 at 19:48
  • @MotiKorets - It would be hard to write the relevant code because it is a part of bigger code. That is the reason why is the question a little bit weird. Basically the main question is: Can I pass argument (type of function, the function is from child component) to a parent component and than call that passed function from the parent? I know it is working, but is it a good idea? – Reenergy Mar 21 '18 at 20:58
  • Does this function have side effects ? Does it change local state? If no just write this function in some utils file and import in both places. If it is then you have to think about state management (this probably the issue) – Moti Korets Mar 21 '18 at 21:05
  • Yeah it changes state of the child component. From your answers I see, that it is not probably good way to do, I will rethink structure of this part of my code. Thanks. – Reenergy Mar 21 '18 at 21:17

0 Answers0