// User class component class User extends React.Component { constructor(props) { super(props); // starting values for component's state this.state = { rating: 0, }; } /* * event handlers: change the state */ handleLike = () => { this.setState({ rating: 1 }); }; handleDislike = () => { this.setState({ rating: -1 }); }; // render the JSX structure render() { return ( <div> <img src={`https://practicum-content.s3.us-west-1.amazonaws.com/web-code/react/moved_${this.props.id}.png`} width="75" /> <p>{this.props.name}</p> <div className="rating"> <button onClick={this.handleLike}>👍</button> {this.state.rating} <button onClick={this.handleDislike}>👎</button> </div> </div> ); } } // the main app code ReactDOM.render( <> <h2>My Imaginary Friends:</h2> <User id="1" name="Gregory" /> <User id="2" name="James" /> <User id="3" name="Allison" /> </>, document.querySelector("#root") );
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter