Date component passing the value to parent component react typescript-CodePudding

I want to create a date component on a child component and show on the screen (on the parent component) the selected date. Moreover I have two problems:

I am not managing to make the components talk with each other. I can print on the console the answer from the child component but I cannot pass to the parent component
When I select date "custom" on my dropdown I want to select a start and end date but I can't do it, when I select one of the dates (start or the end) the other updates itself automatically.

Any help is welcome :)

Here is my codesandbox: https://codesandbox.io/s/date-picker-forked-h1u9s?file=/src/App.tsx

This is how I call the date component

  export default function App() {
  return (
    <div>
      <DateComponent />
      <div>Your chosen date was: </div>
    </div>
  );
}

This is the date component:

return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <div className="App">
        <div>
          <ReactSelect
            value={selectedOption as ValueType<OptionType>}
            onChange={(option) => handleChange(option)}
            isMulti={false}
            options={options}
          />

          {selectedOption === DateValueEnum.Custom ? (
            <div style={{ display: "flex" }}>
              <div style={{ width: "50%", float: "left", paddingRight: "5px" }}>
                <DatePicker
                  fullWidth
                  margin="normal"
                  required={true}
                  error={false}
                  invalidLabel={"Several values..."}
                  value={selectedDate}
                  onChange={(newDate) => setSelectedDate(newDate)}
                  format="MM/dd/yyyy"
                />
              </div>
              <DatePicker
                fullWidth
                margin="normal"
                required={true}
                error={false}
                invalidLabel={"Several values..."}
                value={selectedDate}
                onChange={(newDate) => setSelectedDate(newDate)}
                format="MM/dd/yyyy"
              />
            </div>
          ) : null}
        </div>
      </div>
    </MuiPickersUtilsProvider>
  );
};

CodePudding user response：

You can share state or function between components. There is many ways to do it

You can share state directly from Parent component to children, before sharing state you need to create one with React useState hook

like so:

 const [date, setDate] = useState("")
 
<DateComponent setDate={setDate} />

Here we passed the setDate function to the children component. When we will call that function in DateComponent we will change the Parrent component's state

 props.setDate("date")

read about state and life cycle here, it will help you a lot. Also read about hooks, which were used previosly.

Another way to pass data between components is useContext it's more complicated way, or you can use library like Redux, Mobx.

About "custom" selected option, you created only one state for two options, so when you pick the date, both are changed. To fix it you nedd to add second state.

here the fixed version: sandbox