Question 306575 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – pass a value from component to component react

I have some code on react that uses two independent components. On clicking a button in the first component, I hide the current component and display the other component. But also, I want to pass some values from the first component (from INPUTS) to the second component. Can you please tell me how can I do that? Here is the code:

App.js

import React from 'react';
import { useState } from 'react';
import { FirstSection} from './components/FirstSection';
import { SecondSection} from './components/SecondSection';

function App() {
  const [checkSection, setSection] = useState(false);
  const showSecondSection= () => setSection(true);
  
  return (
    <div className="App">
        {checkSection ? <SecondSection /> : <FirstSection onClick={showSecondSection} />}
    </div>
  );
}

export default App;

FirstSection.jsx

import { useState } from 'react';

export function FirstSection({onClick}) {
    const [Value, setValue] = useState();
    return(
        <>
         <input type="text" value="{input1}" />
         <input type="text" value="{input2}" />
         <button onClick={onClick}>Continue</button>
        </>
    )
}

SecondSection.jsx

export function SecondSection() {
    return(
        <>
         <p>{input1}, {input2}</p> <== here I want to pass data from the first component
        </>
    )
}
Tags:

2

Answers


  1. 0

    Used context

    You can get { inputValues, setInputValues } from context at below the App level in render tree. I am setting the inputValues in first section and retrieving it in second section.

    import React, { createContext, useContext, useState } from "react";
const MyContext = createContext();

const FirstSection = ({ onClick }) => {
  const [input1, setInput1] = useState("");
  const [input2, setInput2] = useState("");
  const { setInputValues } = useContext(MyContext);

  const handleContinue = () => {
    setInputValues({ input1, input2 });
    onClick();
  };

  return (
    <>
      <input
        type="text"
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
      />
      <input
        type="text"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
      />
      <button onClick={handleContinue}>Continue</button>
    </>
  );
};

const SecondSection = () => {
  const { inputValues } = useContext(MyContext);

  return (
    <>
      <p>
        {inputValues.input1}, {inputValues.input2}
      </p>
    </>
  );
};

export default App = () => {
  const [showSecondSection, setShowSecondSection] = useState(false);
  const [inputValues, setInputValues] = useState({ input1: "", input2: "" });

  const showSecondSectionHandler = () => setShowSecondSection(true);
  const contextValue = { inputValues, setInputValues };

  return (
    <div className="App">
      <MyContext.Provider value={contextValue}>
        {showSecondSection ? (
          <SecondSection />
        ) : (
          <FirstSection onClick={showSecondSectionHandler} />
        )}
      </MyContext.Provider>
    </div>
  );
};

    If you wanna play around with code.

    You can also pass setter function (setInputValues) to FirstSection and state (inputValues) to SecondSection as prop, it will work the same.

    <FirstSection setInputValues={setInputValues}....
<SecondSection inputValues={inputValues} ....
    Login or Signup to reply.
  2. 0

    you can have a state in the App component and then pass the value to the SecondSection component and the setState function to the FirstSection component.

    function App () {
  const [checkSection, setSection] = useState(false);
  const [inputValue, setInputValue] = useState({ inputOne: "", inputTwo: "" });
  const showSecondSection = () => setSection(true);

  return (
    <div className="App">
      {checkSection ? (
        <SecondSection value={inputValue} />
      ) : (
        <FirstSection
          onClick={showSecondSection}
          setStateFunc={setInputValue}
          inputValue={inputValue}
        />
      )}
    </div>
  );
};

export default App;

export function FirstSection({ onClick, inputValue, setStateFunc }) {
  const onChangeHandler = (e) => {
    const { name, value } = e.target;
    if (name === "inputOne") {
      setStateFunc({ ...inputValue, inputOne: value });
      return;
    }
    setStateFunc({ ...inputValue, inputTwo: value });
  };
  return (
    <>
      <input
        onChange={onChangeHandler}
        name="inputOne"
        type="text"
        value={inputValue.inputOne}
      />
      <input
        onChange={onChangeHandler}
        name="inputTwo"
        type="text"
        value={inputValue.inputTwo}
      />
      <button onClick={onClick}> Continue </button>
    </>
  );
}

// SecondSection component
export function SecondSection({ value }) {
  return (
    <p>
      {value.inputOne}, {value.inputTwo}
    </p>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search