Question 335312 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do I manage state of an imported component in react?

I’m learning react and have a file that has multiple components and I’m trying to split them into separate component files. However, when I move them into different files, my onChange stops working. Here is what I’m currently trying:

ParamSelection file:

function ParamSelection() {
const [startDate, setStartDate] = useState();
return (
<div className={styles.paramSelection}>
        <StartDate
            onChange={(date) => {setStartDate({date})}}
        />
        </div>
);
};

StartDate file:

function StartDate() {
const [startDate, setStartDate] = useState();

return (
    <Flatpickr
            className={styles.dateSelection}
            placeholder="Select Start Date and Time"
            options={{
                enableTime: true,
                enableSeconds: true,
                dateFormat: "Y-m-dTH:i:S",
                time_24hr: true,
                position: "below",
                minuteIncrement: 1,
                secondIncrement: 1,
                mode: "single",
                static: true
            }}
            onChange={(date) => {setStartDate({date})}}
            />
);
};

export default StartDate;

When I run this, the startDate state value doesn’t get updated so any help is appreciated thank you!

Tags:

2

Answers


  1. 0

    One way is to pass the state from parent and get the updated onChange value, below is the working example of passing state from parent this, You can replace input with your component:

    function StartDate({ state, setState }) {
  return (
    <>
      <input
        placeholder="Select Start Date and Time"
        options={{
          enableTime: true,
          enableSeconds: true,
          dateFormat: "Y-m-dTH:i:S",
          time_24hr: true,
          position: "below",
          minuteIncrement: 1,
          secondIncrement: 1,
          mode: "single",
          static: true,
        }}
        onChange={(e) => setState(e.target.value)}
        value={state}
      />
      <br />
      This is my state value: {state}
    </>
  );
}

export default StartDate;

    import { useState } from "react";
import StartDate from "./StartDate";

export function Test() {
  const [startDate, setStartDate] = useState("");
  return (
    <div>
      <StartDate state={startDate} setState={setStartDate} />
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Just simply take props from ParamSelection and make sure in that page you should have defined state and onChange properly. and then after in StartDate you have to take onChange as a props and give it to Flatpickr like that.

    function StartDate({ onChange }) {

return (
    <Flatpickr
            className={styles.dateSelection}
            placeholder="Select Start Date and Time"
            options={{
                enableTime: true,
                enableSeconds: true,
                dateFormat: "Y-m-dTH:i:S",
                time_24hr: true,
                position: "below",
                minuteIncrement: 1,
                secondIncrement: 1,
                mode: "single",
                static: true
            }}
            onChange={onChange}}
            />
    );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search