Как бы я поднял состояние в этом небольшом рандомизаторе, чтобы я мог иметь его в качестве компонента?

Question

Я использую это небольшое приложение для ввода имен, а затем случайным образом выбираю имена из массива, когда он полностью введен. Из того, что я могу понять, я должен поднять состояние от входных данных до родительского компонента класса. Кроме того, могу ли я абстрагировать JSX в отдельный файл и импортировать его после того, как состояние было перемещено в родительский объект?

Я очень новичок в этом, поэтому я не понимаю, как сделать это так, чтобы все по-прежнему работало. По сути, я хотел бы просто иметь возможность вызывать компонент в главном экземпляре и давать реквизиты, которые будут делить состояние с компонентом, а затем иметь возможность передавать обновленное состояние от компонента к родителю. Это возможно? Я очень смущен и хотел бы любую помощь и решения.

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

    this.state = {
        value: '',
        name: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEnter =  this.handleEnter.bind(this);
    this.handleRandomize = this.handleRandomize.bind(this);
}



handleChange(e) {
  this.setState({
    value: e.target.value    
  }) 
 }

 handleSubmit() {
  this.setState({
    value: '',
    name: this.state.name.concat(this.state.value)    
  })
  console.log(this.state.name);
 }

 handleEnter(e) {
 if (e.key === 'Enter') {
   this.handleSubmit();
 }
 }

 handleRandomize() {
 let randVal = this.state.name;

 let speaker = randVal[Math.floor(Math.random() * randVal.length)];

 console.log(speaker);
 }

render(){

return (
<div>
  <input type='text' value={this.state.value} onChange={this.handleChange} onKeyPress={this.handleEnter}/>
  <br></br>
  <button onClick = {this.handleSubmit}>Submit Name</button>
  <button onClick = {this.handleRandomize}>Randomize!</button>

<ul>{this.state.name.map((names) => <li key={names.toString()}>{names}</li>)}</ul>
</div>
  ) 
 }
};