Event handlers, passing to unordered list

JavaScript
4

There is no display and understanding the button element in render seems to be the problem that needs help. It has been hard to search for explanations on the value attribute in an input element. I do not know where the value attribute comes from, maybe event.target.value. The value attribute is then used in the input element with the event handler. Do both value and the event handler need to be in an input element?
The example is the first app.

const handleSubmit = e => {
    e.preventDefault();
    alert("you have searched for - " + value);
    // or you can send to backend
  };

return (
    <div className="App">
      <form>
        <input value={value} onChange={handleChange}/>
        <button onClick={handleSubmit} type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}

How to trigger a button click on Enter in React | Reactgo

Clicking the button amends the state of messages. The button element could be passed this.input or this.submitMessage. This is confused.

<button type="submit" value={this.submitMessage} onClick={this.submitMessage}>Add message</button>

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(event)  {this.setState({input: event.target.value})}
  submitMessage() {
    this.setState({messages: this.state.messages.concat(this.state.input)
    });
  }
  render() {
    let listItems = messsages.map(item =>
    <li>{item}</li>
    );
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
        <input type="text" onChange={this.handleChange} />
        <button type="submit" value={this.submitMessage} onClick={this.submitMessage}>Add message</button>
        <ul>
        {listItems}
        </ul>
        { /* Change code above this line */ }
      </div>
    );
  }
};

Update
I am reading about input’s attribute of value.
https://forum.freecodecamp.org/t/react-and-redux-manage-state-locally-first-value-this-state-input/231891/3