Passing value from one component to another, ReactJs?

Question

JavaScript

Hello! Can you please tell me if it is allowed in Reactjs to pass values ​​from one component to another via a global variable? In the example, the global variable color1. codepen.io/juniorCh/pen/ZOqLov I would be grateful for any alternative solution. I am also interested in how you would style the inputs, that is, there is an input with value=red and you need to have the same background.
Thanks in advance for help)

Answer 1

1) context
At the main component, for example, App (or you can create a wrapper component, HOC), a childContext is given, in which the necessary parameters are passed.
2) we store the config in a separate file and connect it where necessary

export default {
  color: 'red'
}

3) flux (redux and others)
create a store in which we will store the color
4) maybe js is not needed for this at all. for example, the color can be set in less/sass or, if you don't need to support older browsers, then there are native variables in css:

:root {
  --color: red;
}
input {
  color: var(--color);
}