Displaying data with React JS

Question

Good morning guys, I’m trying to display on the screen a message typed by the user, something very simple but as I am new in React I don’t have much idea how to do this. Well, the code below went as far as I could reach, it is not taking the input data nor returning when I click the button. If you can help me I’d be very grateful, Thank you !

import React, { Component } from 'react'

class Button2 extends Component {
   constructor(props) {
       super(props)

       this.state = {
           text: 'Your Name Here',
       }

   }

   clicked = (event) => {
       this.setState = ({ text: event.target.value })
   }

   handlerSubmit = e => {
       e.preventDefault()
       this.setState = { text: this.state.text }
   }
   render() {
       return (
           <form onSubmit={this.handlerSubmit}>
               {this.state.text}
               <input type="text" />
               <button onClick={this.clicked}>Click on me</button>
           </form>

         )

      }
  }

  export default Button2

Answer 1

As you are at that moment of learning the name of the component does not refer to the component and what it represents, but, you need to change the state of the input text, then you need to program that which is in the eventonChange that input, example:

handlerOnChangeInput = e => {   
    const {name, value} = e.target;
    this.setState({[name]: value});
}

this function can change to the whole state of the input, but, for this to work the name of input has to be passed equal to the name of the created state variable which in its specific case is text.

In general it is done so:

handlerOnChangeInput = e => {   
    this.setState({text: e.target.value});
}

but, is restricted only in this input (can be done so also no problems, will only write a little more because the code will only work for that input and if there are more that need to save state then have to write to each one, so I put the generic before, choose the best one for you)

The complete and functional example:

class Button2 extends React.Component {
   constructor(props) {
       super(props)

       this.state = {
           text: 'Your Name Here',
       }

   }

   handlerSubmit = e => {
       e.preventDefault();
       console.log(this.state.text);
   }
   
   handlerOnChangeInput = e => {   
    const {name, value} = e.target;
    this.setState({[name]: value});
   }
   render() {
       return (
           <form onSubmit={this.handlerSubmit}>
               {this.state.text}
               <input type="text" value={this.state.text} name="text" id="text" onChange={this.handlerOnChangeInput} />
               <button onClick={this.clicked}>Click on me</button>
           </form>

         )

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">Aguarde ...</div>

^{Observing: the button in this case redeems the value of the state of the component in the created key, that is, it is different, in the case to take the value of the text need to type this.state.text.}