How to find element by Key in React?

Question

<ul>     <li key='search1'>1234</li>     <li key='search2'>5678</li>     <li key='search3'>9</li> </ul> 

How to find element by Key and change element values like addClass/innerHtml?

Note: In Plain React - No Flux or Jsx.

Answer 1

Access to key has been removed in React.

The props key and ref were already reserved property names.
...
You can no longer access this.props.ref and this.props.key from inside the Component instance itself. https://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#breaking-change-key-and-ref-removed-from-this.props

You can simply use a different name (e.g. 'reactKey') and access it via props. Here is a demo: http://codepen.io/PiotrBerebecki/pen/PGaxdx

class App extends React.Component {   render() {     return (       <div>         <Child key="testKey1" keyProp="testKey1"/>         <Child key="testKey2" keyProp="testKey2"/>         <Child key="testKey3" keyProp="testKey3"/>         <Child key="testKey4" keyProp="testKey4"/>       </div>     );   } }  class Child extends React.Component {   render() {     console.log(this.props);  // only 'keyProp' is available      let getClassName = () => {       switch (this.props.keyProp) {         case 'testKey1':            return 'red';         case 'testKey2':            return 'green';         case 'testKey3':            return 'blue';         default:            return 'black';        }     };      return (       <div className={getClassName()}>         Some Text       </div>     );   } }  ReactDOM.render(   <App />,   document.getElementById('app') );