You can use state in App component which you can change it inside Tools and new state pass to DrawingBoard,

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      styledata: {}
    };
  }

  getFormData(name, value) {
    this.setState({
      styledata: { [name]: value }
    })
  }

  render() {
    return <div className="main-container">
      <DrawingBoard styledata={ this.state.styledata } />
      <Tools data={ this.getFormData.bind(this) } />
    </div>
  }
}

class Tools extends React.Component {
  getData() {
    // Load data
    // 
    this.props.data('color', 'red');
  }

  render() {
    return <div>
      <button onClick={ this.getData.bind(this) }>Change Data</button>
    </div>
  }
}

class DrawingBoard extends React.Component {
  render() {
    return <div>
      <h1 style={ this.props.styledata }>DrawingBoard</h1>
    </div>
  }
}

Example

In this case, if you have given a pascal case naming for the text input such as function TextInput(){...} , then react will consider this as a separate component even if this is defined in the same file. This is why the state variables of the App component are not within the scope of TextInput

You can mitigate this by following either of the following approcahes,

• Make text input a normal function which returns the JSX

function textInput(){
 // the state variable 'success' and 'setSuccess' will be normally accessible here
 return(
   <div>
      <input type="text" />
   <div>
 )
}

//return for the 'App' component

return(
   <>
     {textInput()}
   </>
)

• Passing the state as props to the TextInput component

  If you follow this approach, then you can have the TextInput component in a separate file as well

//parent 'App' component

function App(){
  const [success, setSuccess] = useState(false);

  return(
    <>
       <TextInput success={success} setSuccess={setSuccess}></TextInput>
    </>
  )
}

function TextInput(props){
   const {success, setSuccess} = props;
   
   // In here you can refer success and setSuccess normally as you would even if this is in a separate file
}

You're best option is to decouple localstorage from both the components & make a it a separate module or a class. Then you can access it in both the files.

Pseudocode

class LocalStorage {

  setItem(key, item) { ... }
  getItem(key) { ... }

}

If you don't want to do that - Lifting the state up is the best possible solution when want to share data between sibling components.

Make a parent component of home & history & use localstorage there.