In JSX | React How can the prop be passed to the button state so the button state can load a new page?

Question

Trying to go from the search using the react datepicker and then check available dates. Having some trouble passing the props to the btn so I can create the new page based on the date selected.

Everything is Imported correctly we can leave that out below is my Datapicker Component and the Btnsearch Component I need the pops to be used by.

I have tried to pass the prop in every element on the component, with the btn built in to the component. I have read its better to pass the props down the chain of elements. To children so I tried to do that lastly. Still can't seem to catch the Datepicked to even console.log it.Tried to build a alert as well.

class Datepicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }
  state = {};
  render() {
    console.log(this.props.value);
    return (
      <>
        <FormGroup>
          <InputGroup className="input-group-alternative">
            <InputGroupAddon addonType="prepend">
              <InputGroupText
              >
                <i className="ni ni-calendar-grid-58" />
              </InputGroupText>
            </InputGroupAddon>
            <ReactDatetime
            value={this.state.value}
            onChange={this.handleChange}
            inputProps={{
              placeholder: "Date Picker Here"
            }}
            timeFormat={false}
            />
          </InputGroup>
        </FormGroup>
        <Btnsearch />
      </>
    );
  }
}

export default Datepicker;

class Btnsearch extends React.Component {
    render() {
        return (
        <button value={this.props.value} className="btn btn-success search-card-btn">Search</button>
    );
    }
};

export default Btnsearch;

I expect to console.log and alert the props been changed when the button is clicked in order to populate a new page. I get props undefined

Answer 1

Just pass down the prop:

 <Btnsearch value={this.state.value}/>

Otherwise your component would never get it.

Edit: there was several issues in your code, I made a snippet for you to check.

https://stackblitz.com/edit/react-af37vl

Select a date, hit "search" and date will be logged in console.

Notice (from react-datetime docs):

Callback trigger when the date changes. The callback receives the selected moment object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string).