Реализация изменения стиля в абзаце компонента React JS

Question

Я изучаю React, пока выполняю несколько простых приложений.

Я пытаюсь создать приложение ввода "поиск и выделение", в то время как пользователь может изменять ввод текста в реальном времени.

Большинство из них работает, мне удалось зафиксировать значение абзаца, а также поисковое слово. Но функция выделения, похоже, не влияет на абзац внутри компонента <Text>.

Зная, что функция должна быть написана правильно, я попытался изменить весь стиль абзаца, и ничто не повлияло на него.

Что я там пропустил? Как я могу получить и изменить Абзац внутри компонента <Text>?

import React, { Component } from 'react';
import './App.css';

class App2 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchWord: '',
            changedText:''
        };
        this.handleChange = this.handleChange.bind(this);
      }

      onUpdate = (val) => {
        this.setState({
        changedText: val
        })
      };  

      handleChange(e) {
        var searchWord;
        this.setState({searchWord: e.target.value})
        searchWord = e.target.value 
        console.log("search word: " +  searchWord );
        this.highlightSearch(this.state.changedText, searchWord);

    }

    highlightSearch(changedText, searchWord) {
      this.setState({inputStyle: {color:'red'}});
        console.log("text: " +  changedText );
        let parts = searchWord.split(new RegExp(`(${searchWord})`, 'gi'));
        return <span> { parts.map((part, i) => 
        <span key={i} style={part.toLowerCase() === searchWord.toLowerCase() ? { backgroundColor: 'yellow' } : {backgroundColor: 'yellow'} }>
            { part }
        </span>)
    } </span>;
    }


    render() {
      return (
        <div className="App">
          <header className="App-header">
            <p>
            Search Tool
            </p>
            <Search handleChange={this.handleChange}
            value={this.state.searchWord} />
            <Text onUpdate={this.onUpdate} 
            highlightSearch={this.highlightSearch} value={this.state.changedText}/>
          </header>
        </div>
      );
    }
  }




  class Search extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchWord : '' }
    }


    render() {
    return (
     <form >
        <label>
          Search For :  
        <input type="text" onChange={this.props.handleChange} value={this.props.searchWord} />
        </label>
      </form>
 )}
}

let inputStyle = {
  border: '1px solid black'
};


class Text extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      changedText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    };

    this.handleChange = this.handleChange.bind(this);

  }

  handleChange(e) {
    this.setState({
      changedText: e.target.value
    });
    this.props.onUpdate(e.target.value);
  }



  render() {
    return ( 
      <div className="text-div" id="myText">
      <p  style={inputStyle} highlightSearch={this.props.highlightSearch} value={this.props.changedText}>{ this.state && this.state.changedText}</p>
      Change text:
        <textarea type="text" onChange={this.handleChange} />
      </div>
      ) }
}




export default App2;