How can I separate a button and a text field into components - React JS

Question

I’m starting with ReactJS and I decided to separate some parts into components, a <botao /> and a field to write.

The application you are creating is simple, is a field to write with two buttons to change the text in lower or upper case.

The code in which it is working, it stopped working when resolve to separate into a component, imagine that there is some logic error, but can not find a solution.

This is the error that is appearing.

App.js

Botao.js

Campo.js

Answer 1

I believe there are better ways to do it, the way you did it is wrong because the state this.state.message is not part of the Component <Botao />, a minimum change to lower or upper case example of a component <textarea/>:

class Botao extends React.Component {
  render() {
    return (
      <button onClick={this.props.callBack}>
      {this.props.status?"Maiusculo":"Minusculo"}
      </button>
    )
  }
}
class Texto extends React.Component {  
  constructor(props) {
    super(props);
    this.setMessage = this.setMessage.bind(this);
    this.state = { message:'abcdef' };
  }
  setMessage(e) { 
    let message = this.props.status ?
      e.target.value.toLowerCase() :
      e.target.value.toUpperCase();
    this.setState({message});
  }
  componentDidUpdate(prevProps) {
    if (prevProps.status !== this.props.status) {
      let message = this.props.status ?
          this.state.message.toLowerCase() :
          this.state.message.toUpperCase();
      this.setState({message});
    }
  }
  render() {
    return (
      <div>        
        <textarea cols="50" rows="5" 
          value={this.state.message} 
          onChange={e => this.setMessage(e)}
        />
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      status: true
    }
    this.callAction =
      this.callAction.bind(this);
  }
  callAction() {
    let status = this.state.status ? false: true;
    this.setState({status});
  }
  render() {
    return (
      <div>
        <Botao status={this.state.status} 
            callBack={this.callAction}/> 
        <Texto status={this.state.status} />
      </div>
    );
  }
}

ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Note: in my view this component should not be broken into 3 because they are part of the same process and only complicated the logic and updates of it, but, I think also separated for reasons to learn.