Problem while passing useState variable from one JSX file to another

Question

(CreateColumn.jsx)

import React, { useState, useEffect } from "react";
import Axios from "axios";
import "./styles.css";
function CreateColumn() {

  let [val1, setVal1] = useState("0");
  let [val2, setVal2] = useState("0");
  let [secName, setSecName] = useState("");
  let [goAttendance, setGoAttendance] = useState(0);

  function valueChanged(event) {
    const checkChecked = event.target.id;
    // console.log(checkChecked);
    if (checkChecked === "section1") {
      setVal1("1");
      setVal2("0");
      setSecName("Section 1");
    } else if (checkChecked === "section2") {
      setVal2("1");
      setVal1("0");
      setSecName("Section 2");
    } else {
      setVal1("0");
      setVal2("0");
      setSecName("");
    }
  }
    useEffect(() => {
      Axios.get("http://localhost:9000/createColumn").then((response) => {
        setSecName(response.data);
      });
    }, []);

  function sendColumn(event) {
    setGoAttendance(1);
    Axios.post("http://localhost:9000/createColumn", { secName, goAttendance });
  }

  return (
    <div>
      <form className="form-body">
        <div className="form-check check-line center-col">
          <input
            className="form-check-input"
            type="checkbox"
            id="section1"
            name="section"
            value={val1}
            checked={val1 === "1"}
            onChange={valueChanged}
          />
        </div>

        <div className="form-check check-line center-col">
          <input
            className="form-check-input"
            type="checkbox"
            id="section2"
            name="section"
            value={val2}
            checked={val2 === "1"}
            onChange={valueChanged}
          />
        </div>
        <div className="submit-btn d-grid gap-2 d-md-flex justify-content-md-center">
          <button
            type="submit"
            className="btn btn-lg btn-primary"
            onClick={sendColumn}
          >
            Create
          </button>
        </div>
      </form>
    </div>
  );
}

export default CreateColumn;

(Attendance.jsx)

import React, { useState, useEffect } from "react";
import Axios from "axios";
import TableTitle from "./TableTitle";
import Pagination from "./Pagination";
import "./styles.css";

function Attendance() {
  const [attedanceList, setAttedanceList] = useState([]);

  useEffect(() => {
    Axios.get("http://localhost:9000/attendance/" + ****WANT TO USE secName FROM CreateColumn.jsx HERE****).then(
      (response) => {
        setAttedanceList(response.data.data.values);
      }
    );
  }, []);

  function sendAllValues(event) {
    Axios.post("http://localhost:9000/attendance", { attedanceList });

  }

  return (
    <form className="form-body">
      <TableTitle />
      <Pagination data={attedanceList} />
      <div className="submit-btn d-grid gap-2 d-md-flex justify-content-md-center">
        <button
          type="submit"
          className="btn btn-lg btn-primary"
          onClick={sendAllValues}
        >
          Submit
        </button>
      </div>
    </form>
  );
}

export default Attendance;

(App.jsx)

import React, { useState } from "react";
import Attendance from "./Attendance";
import CreateColumn from "./CreateColumn";

function App() {
  return (
    <div>
      <CreateColumn />
      **WANT TO USE goAttendance FROM CreateColumn.jsx HERE** && <Attendance />
    </div>
  );
}

export default App;

I wanna use useState variables (secName and goAttendance) from Column.jsx in Attendance.jsx and App.jsx (where I have marked as WANT TO USE...). How is it possible?

More precisely, I wanna use secName from Column.jsx into Attendance.jsx. Also, I wanna use goAttendance from Column.jsx into App.jsx

I tried so many things for hours but sometimes it breaks my code or simply have to change a lot which makes the code more messy and buggy.

Harsh Gupta · Accepted Answer · 2022-07-19T17:23:42.917

0

As I can see CreateColumn and Attendence are the child components of App. You want to create a state and use it in app where as you want to set it in its child component. What I will suggest is to create the state and setState function on app level and then pass the state and setState function as props in the child component. I will suggest you to see this to know more about props.

in app.jsx

let [val1, setVal1] = useState("0");
let [val2, setVal2] = useState("0");
let [secName, setSecName] = useState("");
let [goAttendance, setGoAttendance] = useState(0);
const [attedanceList, setAttedanceList] = useState([]);
 
// while calling the components 
return(
<>
<CreateColumn val1={val1}, val2={val2}, secName={secName}, ....../>
<Attendance val1={val1}, val2={val2}, secName={secName}, ....../>
</>
)

in CreateColumn and Attendence while declaring the components write

function Attendance({val1, val2, secName, setVal1, ...})

and then use the states and setStates in app.jsx

edited Jul 19 '22 at 17:23

answered Jul 19 '22 at 17:04

Harsh Gupta

527
1
3
13

I wanna use secName from Column.jsx into Attendance.jsx. Also, I wanna use goAttendance from Column.jsx into App.jsx how can I do it? – Sumitram Kumar Jul 19 '22 at 17:09
Declare all the states and setState in app.jsx and then pass it in both the components as props and then you can call it from any of the components. – Harsh Gupta Jul 19 '22 at 17:11
Suppose I call `secName` & `goAttendance` from App.jsx into Column.jsx using props and set some values. Will the changed value of `goAttendance` in Column.jsx reflect in Attendance.jsx if I will call it from App.jsx? – Sumitram Kumar Jul 19 '22 at 17:16
Thats the reason useState is called a react hook, suppose you declare a state in app.jsx and then you are setting it in CreateColumn and then displaying it in Attendence. When you update your state in CreateColumn it will rerender the Attendence component and update the states value. – Harsh Gupta Jul 19 '22 at 17:21
Thanks. I am beginner. I got it now – Sumitram Kumar Jul 19 '22 at 17:24

Problem while passing useState variable from one JSX file to another

1 Answers1