How do I get the value of a useState hook from an imported component in a React app?-CodePudding

I have a simple react app that I made with a create-react-app command. It's pretty boilerplate but I added typescript. My App.tsx file looks like this:

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import ToggleSwitch from "./ToggleSwitch";

function App() {
  const [resp, setResp] = useState("");

  async function callApi() {
    const url = `${process.env.REACT_APP_API_URL}/hello`;
    const helloStream = await fetch(url);
    const helloText = await helloStream.text();
    setResp(helloText as string);
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <ToggleSwitch />
      <br />
      <br />
      <div className="card">
        <button onClick={() => callApi()}>click this to call API</button>
        <p>{resp}</p>
      </div>
    </div>
  );
}

export default App;

Notice how I'm using the imported component <ToggleSwitch /> who's source code is in the file ToggleSwitch.tsx which looks like this:

import React, { useState } from "react";
import "./ToggleSwitch.css";

function ToggleSwitch() {
  const [isToggled, setIsToggled] = useState(false);
  const onToggle = () => setIsToggled(!isToggled);
  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isToggled} onChange={onToggle} />
      <span className="switch" />
    </label>
  );
}
export default ToggleSwitch;

As you can see from ToggleSwitch.tsx, I have a useState hook dictating whether or not the switch value "isToggled" is "true" or "false." How do I get the state of that switch value "isToggled" from the App.tsx file? It is crucial that i can access "isToggled" from App.tsx becuase I plan on putting the toggled boolean into the API call that App.tsx is performing on the button press that calls callApi().

CodePudding user response：

So both App and ToggleSwitch need the isToggled state. A common practice to solve this is to lift the state up, meaning the App component will handle that piece of state.

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import ToggleSwitch from "./ToggleSwitch";

function App() {
  const [resp, setResp] = useState("");
  const [isToggled, setIsToggled] = useState(false);

  async function callApi() {
    const url = `${process.env.REACT_APP_API_URL}/hello`;
    const helloStream = await fetch(url);
    const helloText = await helloStream.text();
    setResp(helloText as string);
  }
  console.log(isToggled);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <ToggleSwitch isToggled setIsToggled />
      <br />
      <br />
      <div className="card">
        <button onClick={() => callApi()}>click this to call API</button>
        <p>{resp}</p>
      </div>
    </div>
  );
}

export default App;

import React, { Dispatch, SetStateAction } from "react";
import "./ToggleSwitch.css";

function ToggleSwitch({ isToggled, setIsToggled } : { isToggled: boolean, setIsToggled: Dispatch<SetStateAction<boolean>> }) {
  const onToggle = () => setIsToggled(!isToggled);
  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isToggled} onChange={onToggle} />
      <span className="switch" />
    </label>
  );
}
export default ToggleSwitch;

CodePudding user response：

To get the value of a useState hook from an imported component in a React app. first you need to export your useState do in your the main file:

import {resp,setResp} from './App.js';

<ToggleSwitch resp={resp} setResp={setResp} />

after that go to ToggleSwitch and set parameters:

function ToggleSwitch({ resp, setResp }) {
//your code
}

I hope your probleme was solved.