Access component state

Question

I have this code, and I want to access the states of the Die component. How can I do it?

EDIT: I have the Die class (component), and I want to access it's setImage state function. Let me put it another way: How can I access ANY value of the child component from the parent component?

function App() {
    const Roll = () => {
        console.log(dice[0].props.Die);
    };
    const dice = [<Die />, <Die />, <Die />, <Die />, <Die />];

    return (
        <div className="App">
            <div className="dice">{dice}</div>
            <button className="generate" onClick={Roll}>
                Roll
            </button>
        </div>
    );
}

Please explain more about question, like what you want to perform after accessing the component — Ferin Patel, Apr 01 '20 at 10:06
You CAN'T, the React data-flow is designed as a waterfall, props passed from parent to child, and state is only been held inside the local component. You can `lift-state-up` but it means expose child component's API to parent, which means those thing is no longer belongs to the child anymore. — keikai, Apr 01 '20 at 10:07
You could use `useRef()` hook to ref each `< Die / >` component, then manipulate function of those components, check this question: https://stackoverflow.com/questions/37949981/call-child-method-from-parent — Kuo-hsuan Hsu, Apr 01 '20 at 10:17

score 0 · Answer 1 · answered Apr 01 '20 at 10:28

In your case you can use useRef hook https://reactjs.org/docs/hooks-reference.html#useref

a basic example is

export default function App() {

  const dieRef = React.useRef(null);

  const Roll = () => {
    console.log(dieRef.current);
  };

  const dice = [
    <Die ref={dieRef} />,
    <Die />,
    <Die />,
    <Die />,
    <Die />
  ];

  return (
    <div className="App">
      <div className="dice">{dice}</div>
      <button className="generate" onClick={Roll}>
        Roll
      </button>
    </div>
  );
}

but for your code example should be something like this

export default function App() {
  const arrOfDieRef = [
    React.useRef(null),
    React.useRef(null),
    React.useRef(null),
    React.useRef(null),
    React.useRef(null)
  ];

  const Roll = () => {
    console.log(arrOfDieRef[0].current.state);
    console.log(arrOfDieRef[1].current.state);
    console.log(arrOfDieRef[2].current.state);
    console.log(arrOfDieRef[3].current.state);
    console.log(arrOfDieRef[4].current.state);
  };

  const dice = [
    <Die ref={arrOfDieRef[0]} />,
    <Die ref={arrOfDieRef[1]} />,
    <Die ref={arrOfDieRef[2]} />,
    <Die ref={arrOfDieRef[3]} />,
    <Die ref={arrOfDieRef[4]} />
  ];

  return (
    <div className="App">
      <div className="dice">{dice}</div>
      <button className="generate" onClick={Roll}>
        Roll
      </button>
    </div>
  );
}

`Warning: Function components cannot be given refs.` – laviRZ Apr 01 '20 at 10:46 — laviRZ, Apr 01 '20 at 10:46

score -1 · Answer 2 · answered Apr 01 '20 at 10:08

-1

You can use React hooks like UseContext and CreateContext for state management and to access component state anywhere in project.

You can also use Redux for State Management

answered Apr 01 '20 at 10:08

Ferin Patel

3,424
2
17
49

Access component state

2 Answers2