Q:

Change element content with onClick in React

In my application I have multiple  blocks generated dynamically and each one of them has an onClick event.
My goal is to be able to change the contents of the div when the click happens.
Is there a way to do this thru event.target property of the onClick event? 
Or should i create a ref for each div upon creation and then work with refs?
Or should i create an array of Div elements in component state and search&modify the element later re-rendering all divs from array? 

A:

Since blocks are generating dynamically, have onClick event on children components.
const Parent = () => {
  return (
    <Child content={content} contentAfterClick={content} />
    <Child content={content} contentAfterClick={content} />
  )
}

class Child extends Component {
  constructor() {
    super();
    this.state ={
      read: false,
    };
  }

 render() {

   if (this.state.read) {
     return(
       <div>{this.props.contentAfterClick}</div>
     )
   }

   return (
     <div onClick={() => this.setState({ read: true })}>
       <div>{this.props.content}</div>
     </div>
   );
 };
}

