react-day-picker DayPickerInput and setting selected date in another component

Question

Using DayPicker in one component, I want to import the selected day into the TodoForm component, and use that value to set the state so that the selected day is saved and rendered in each todo.

class DayPickerComponent extends Component {
    constructor(props) {
        super(props);
        this.handleDayChange = this.handleDayChange.bind(this);
        this.state = {
            selectedDay: undefined,
            isEmpty: true,
            isDisabled: false
        }
    }

    handleDayChange(selectedDay, modifiers, dayPickerInput) {
        const input = dayPickerInput.getInput();
        this.setState({
            selectedDay,
            isEmpty: !input.value.trim(),
            isDisabled: modifiers.disabled === true
        })
    }

    render() {
        const today = new Date();
        const { selectedDay, isDisabled, isEmpty } = this.state;
        console.log('selectedDay: ', selectedDay)

        return (
            <span>
                <DayPickerInput
                    disabledDays={{
                        before: today
                    }}
                    onDayChange={this.handleDayChange}
                />
            </span>
        )
    }
}

The console.log(selectedDay); logs the selectedDay but how can I access the selectedDay value in the TodoForm component and set the state and render the selected day?

function TodoForm({addTodo}) {
  const initialState = {
    title: '',
    due_date: '',
    description: '',
    completed: false
  }

  const [state, setState] = useState(initialState);

  const handleSubmit = e => {
    e.preventDefault();
    // if (state.title && state.due_date && state.description) {
      addTodo(state.title, state.due_date, state.description)
    // } else {
    //   alert('A task must contain a title, description, and a due date. Please add the required information and then submit.')
    // }
    resetInput();
  }

  function handleChange(e) {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.name]: value,
    })
  }

  function resetInput () {
    setState(initialState);
  }

  return (
    <form id='form' onSubmit={handleSubmit}>
      <div>
        <span className='title'>Title: </span>
        <input type='text' className='input' name='title' value={state.title} onChange={handleChange} />
      </div>
      <div>
        <span className='title'> Due Date: </span>
        {/* <input type='text' className='input' name='due_date' value={state.due_date} onChange={handleChange} /> */}
        <DayPickerComponent selectedDay />
      </div>
      <div>
        <span className='title'>Description: </span>
        <input type='text' className='input' name='description' value={state.description} onChange={handleChange} />

        <span id='add-button' className='add-button-wrapper'>
          <button id='add-button-appearance'>
            +
          </button>
          <span className='add-button-tooltiptext'>add</span>
        </span>
      </div>
    </form>
  )
}

I'm also having a hard time disabling the dates before today but the state thing is my biggest issue. Thanks!

Answer 1

Pass it as props

https://reactjs.org/docs/components-and-props.html

Inside DayPickerComponent you pass the selectedDay to TodoForm:

<Todoform selectedDay={this.state.selectedDay} />

Then you need to declare the props on the function TodoForm:

function TodoForm(props) {
.....
....
.
console.log(props.selectedDay)
.
...
.....
}

and so, you can call the selected day inside TodoForm as:

props.selectedDay