Home / Questions / 522952
Accepted
H. Díaz
Asked: 2022-08-22 07:03:38 +0800 CST 2022-08-22 07:03:38 +0800 CST

How to handle multiple child components in ReactJS?

  • 772

My question is simple: How can I handle the value of two child components? Example:

I have this class, Board:

import React, { Component } from 'react';
import Square from './Square';

    export default class Board extends Component {
    
        render(){
            return (
                <>
                    <Square />
                    <Square />
                </>
            );
        }
    
    }

and this is the child component:

import React, {useState} from 'react';

const Square = (props) => {

    let initStatusMessage = 'Aún no se ha clicado.'
    const [count, setCount] = useState(0);
    const [status, setStatus] = useState(initStatusMessage);

    function handleClick(){
        setCount(count + 1);
        if(status === initStatusMessage){
            setStatus('Veces clicado: ');
        }
    }

    return(
        <div>
            <p>{status}</p>
            <button onClick={() => handleClick()}>{count}</button>
        </div>
    );
}

export default Square;

How, instead of handling the count value for each of the children, can I handle the different values ​​from the parent?

javascript

2 Answers

  1. Best Answer

    The parent component can take independent control of each of its children, for example through a state in the parent and a function that your children receive as a "callback" to update the state in the parent.

    Something like that: 

    const Square = (props) => {
    const { count, onChange } = props;
    let initStatusMessage = 'Aún no se ha clicado.'
    const [status, setStatus] = React.useState(initStatusMessage);

    function handleClick(){
        onChange(count + 1);
        if(count > 0){
            setStatus('Veces clicado: ');
        }
    }

    return(
        <div>
            <p>{status}</p>
            <button onClick={() => handleClick()}>{count}</button>
        </div>
    );
}


class Board extends React.Component {

    constructor(props) {
      super(props);
      this.state = { 
        childrenCounter: [0, 0]
      }
    }

    handleChange = (index, value) => {
      const nextCounter = [...this.state.childrenCounter];
      nextCounter[index] = value
      this.setState({
        childrenCounter: nextCounter,
      })
    }

    render() {
      const { childrenCounter } = this.state;
      
        return (
            <React.Fragment>
                <Square count={childrenCounter[0]} onChange={(val) => this.handleChange(0, val)} />
                <Square count={childrenCounter[1]} onChange={(val) => this.handleChange(1, val)} />
            </React.Fragment>
        );
    }

}

ReactDOM.render(<Board />, document.getElementById('root'));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

    • 1

  2. If you use a functional component (I don't know how to do it with classes) you can put the state and the click handler in the parent and pass it as props to the children, like this (I did it on a pc that doesn't have react to test , there may be something wrong, you try it and tell me anything):

    import Square from './Square';
import React, {useState} from 'react';

    export default  const Board = () => {

  let initStatusMessage = 'Aún no se ha clicado.'
    const [count, setCount] = useState(0);
    const [status, setStatus] = useState(initStatusMessage);

    function handleClick(){
        setCount(count + 1);
        if(status === initStatusMessage){
            setStatus('Veces clicado: ');
        }
    }
    
        render(){
            return (
                <>
                    <Square count={count} status={status} handleClick={handleClick} />
                    <Square count={count} status={status} handleClick={handleClick} />
                </>
            );
        }
    
    }

    the square component:

    const Square = (props) => {

    return(
        <div>
            <p>{props.status}</p>
            <button onClick={props.handleClick}>{props.count}</button>
        </div>
    );
}

export default Square;

    I recommend this course, it's very good: https://youtube.com/playlist?list=PLvq-jIkSeTUZ5XcUw8fJPTBKEHEKPMTKk

    • 0