如何highlight兩個數組裏面相同的text

#1

下面是我寫的代碼,但是它只能highlight search 到的數組裏面的第一個COMPONENT 的TEXT,請問下如何HIGHLIGHT數組裏面兩個相同的TEXT?

<div id="app2"></div>
 <script type="text/babel">
 class MyApp extends React.Component {
     constructor() {
         super();

         this.state = {
             inputValue: "",
             fields: [<Ta />,<Ta1 />]
         };
         this.handleChange = this.handleChange.bind(this);
     }





     handleChange(e) {
         let object = this.refs.Progress1;
  let fields12 = this.state.fields;
         let searchBarText = e.target.value;
         let divText = object.textContent;
         let idx = divText.indexOf(searchBarText);


         if (idx >= 0) {



            let newText = [divText.substring(0, idx),
                 <strong>{divText.substring(idx, idx + searchBarText.length)}</strong>, divText.substring(idx + searchBarText.length)];
             this.setState({ inputValue: searchBarText, fields:newText});
        } else {
             this.setState({ inputValue: searchBarText, fields: fields});
         }

   


     }

     render() {
         return (
         <div>
             <input
                 type="text"
                 className="input"
                 onChange={this.handleChange}
                 placeholder="Search..."
             />
             <p  ref="Progress1" id="try">
                 <p>{this.state.fields}</p>
             </p>
   <p  ref="Progress2">
                 <p>{this.state.fields1}</p>
             </p>
         </div>
         );
     }
 }

 class Ta extends React.Component {
     render() {
         return <p >this is a dog</p>;
     }
 }

 class Ta1 extends React.Component {
     render() {
         return <p>this is another dog</p>;
     }
 }




 ReactDOM.render(<MyApp />, document.getElementById("app2"));

 </script>
 <style>
     strong
     {
     color:red;
     }
 </style>