How can the value go from the Child element to the sister Element in React | JSX

Question

I am taking a date from the drop down date picker and trying to use it in another page so I can cross reference times open for bookings. When the Datepicker selects a date, and The props value is set on the Btnsearch It tries to redirect and seems like it does rerender but the prop value is undefined while the wasSubmit changes to true. Where do I pull this prop from?

I have added what I thought was a router, I set the sate with an attribute this.state.value but that does not seem to fix the issue.

Here is my Date Picker, Btnsearch, Bookingpage

import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";
import { Redirect } from 'react-router-dom';
import Bookingpage from "./Bookingpage/Bookingpage";

// reactstrap components
import {
  FormGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Col,
  Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    //this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit = event => {
    event.preventDefault();
    this.setState({wasSubmitted: true});
}

render() {
    const { value, wasSubmitted } = this.state;

    if (wasSubmitted) {
        return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
    } else {
      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>
          <form onSubmit={this.handleSubmit}>
          <Btnsearch  type="submit" value={this.state.value}/>
          </form>
        </>
      );
    }
  }
}

export default Datepicker;

import '../Datepicker';

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

export default Btnsearch;

import '../Datepicker';
class Bookingpage extends React.Component {
    render() {
        return(
            <div className="bookingPage">
            <h1>{this.props.value}</h1>
            </div>
        );
    }
}

export default Bookingpage;

When Select the date and hit the search btn I expect it to redirect to a page Bookingpage that says the value selected. The Actual results are

    <div class="App">
        <div class="card freesearch-option">
            <label><span class="searchTitleTxt">Search For Availability</span>
                <div class="bookingPage">
                    <h1></h1></div>
            </label>
        </div>
    </div>

State
value:
""

wasSubmitted: true

The full project is here https://react-puh2oq.stackblitz.io

Answer 1

I don't see a handleChange function.

So it seems like you are picking a date but not .setState()ing the this.state.value.

            <ReactDatetime
              value={this.state.value}
// HERE YOU CALL IT, BUT handleChange DOESN'T EXIST.
              onChange={this.handleChange} 
              inputProps={{
                placeholder: "Date Picker Here"
              }}
              timeFormat={false}
             />

Well, a proper handleChange function could be like this:

.
.
.
  handleSubmit = event => {
    event.preventDefault();
    this.setState({wasSubmitted: true});
}

handleChange = e => {
    e.preventDefault();
    this.setState({ value: e.target.value });
}


render() {
    const { value, wasSubmitted } = this.state;

    if (wasSubmitted) {
        return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
    } else {
.
.
.

• You don't have to .bind() neither this function nor handleSubmit as long as you use fat arrow syntax.