Guest User

Untitled

a guest
Jul 30th, 2020
47
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2.  
  3. export class Parent extends React.Component {
  4.     constructor(props){
  5.         super(props);
  6.         this.state = {
  7.             number: 0,
  8.             number2: 0
  9.         }
  10.     }
  11.  
  12.     handleInputValue = (e) => {
  13.         this.setState({
  14.             number: e.target.value,
  15.             number2: e.target.value
  16.         })
  17.     }
  18.  
  19.     handleIncrement = () => {
  20.         this.setState( prevState => {
  21.             return {number2: Number(prevState.number2)+1}
  22.         });
  23.     }
  24.  
  25.     handleDecrement = () => {
  26.         this.setState( prevState => {
  27.             return {number2: Number(prevState.number2)-1}
  28.         });
  29.     }
  30.    
  31.     render(){
  32.         return(
  33.             <div>
  34.                 <p>Parent</p>
  35.                 <input type="number" value={this.state.number} onChange={this.handleInputValue}/>
  36.                 <Child
  37.                     handleChange={this.handleInputValue}
  38.                     value={this.state.number2}
  39.                     increment={this.handleIncrement}
  40.                     decrement={this.handleDecrement}
  41.                 />
  42.             </div>
  43.         );
  44.     }
  45. }
  46.  
  47. class Child extends React.Component{
  48.     constructor(props){
  49.         super(props);
  50.         this.state = {
  51.             number2: this.props.value
  52.         }
  53.     }
  54.     handleIncrement = (e) => {
  55.         return e.target.value + 1
  56.     }
  57.     render(){
  58.         return(
  59.             <div>                
  60.                 <br/>
  61.                 <p>Child</p>
  62.                 <input type="number" onChange={this.props.handleChange} value={this.props.value}/>
  63.                 <br/>
  64.                 <br/>
  65.                 <div>
  66.                     <button onClick={this.props.increment}>Increment</button>
  67.                     <button onClick={this.props.decrement}>Decrement</button>
  68.                 </div>
  69.             </div>
  70.            
  71.         )
  72.        
  73.     }
  74. }
  75.  
  76. export default Parent
RAW Paste Data