How to pass value of state variable from one component to another?-CodePudding

I have the below Form.js component that takes data from an input form and makes an API call. The response is stored in my walletAssets state variable. Now, if I want to make a separate component, say Display.js to display the response that was stored in walletAssets, how would I pass the value of walletAssets to the other component so I can use it there?

export default function Form() {
  const [walletAddress, setWalletAddress] = React.useState("");
  const [walletAssets, setWalletAssets] = React.useState([]);

  function handleSubmit(event) {
    request("https://sampleapi.com", query).then((data) =>
      setWalletAssets(data)
    );
  }

  return (
    <div className="form" onSubmit={handleSubmit}>
      <form>
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          onChange={handleChange}
        />
        <button>Submit</button>
      </form>
    </div>
  );
}



export default function Display() {
     //I want to reference the value of walletAssets here
    return()
}

CodePudding user response：

You should use react context or state manager like redux

CodePudding user response：

you can change your Display component like this

export default function Display({walletAssets}) {
    return(
       <>
       {
          walletAssets.map((el) => {
              <p>{el}</p>
          });
       }
       </>
    )
}

and to pass the data, do something like this in Form file

    <div className="form" onSubmit={handleSubmit}>
      <form>
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          onChange={handleChange}
        />
        <button>Submit</button>
      </form>
      <Display walletAssets={walletAssets}/>
    </div>

CodePudding user response：

So there are multiple solution.
The easiest way is to pass the prop to the child component.
Like this:

export default function Form() {
  const [walletAddress, setWalletAddress] = React.useState("");
  const [walletAssets, setWalletAssets] = React.useState([]);

  function handleSubmit(event) {
    request("https://sampleapi.com", query).then((data) =>
      setWalletAssets(data)
    );
  }

  return (
    <div className="form" onSubmit={handleSubmit}>
      <form>
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          onChange={handleChange}
        />
        <button>Submit</button>
      </form>
    </div>
  );
}



export default function Display(props) {
     //I want to reference the value of walletAssets here
    return(<h1>{props.<property>} )
}

If you want to pass object to multiple component. You can use some state manager options like react context or redux or mobx.