3

I try to pass some information from an input field in the child to the parent.

What i have so far is this:

Parent

import React from "react";
import PropTypes from "prop-types";

import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

import TimelineWidget from "./timeline-widget/timeline-widget.component";
import ContainerTable from "./container-table/container-table.component";
import HistoryTable from "./history-table/history-table.component";
import ShippingOverview from "./shipping-overview/shipping-overview.component";
import MapWidget from "./map-widget/map-widget.component";

import styles from "./shippingInformation.style";

class shippingInformation extends React.Component {
  constructor() {
  super();
    this.inputChange = this.inputChange.bind(this);
  }

  state = {
    searchString: null
  };

  inputChange(input){
    this.setState({ searchString: input });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.DashboardPageWrapper}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={16}>
            <Grid
              key={1}
              item
              xs={12}
              sm={12}
              md={9}
              className={classes.Widget}
            >
              <Typography
                variant="subheading"
                className={classes.WidgetHeading}
              >
                Timeline of Container #
              </Typography>
              <Paper className={classes.WidgetContent}>
                <TimelineWidget />
              </Paper>
            </Grid>

            <Grid
              key={2}
              item
              xs={12}
              sm={12}
              md={3}
              className={classes.Widget}
            >
              <Typography
                variant="subheading"
                className={classes.WidgetHeading}
              >
                Shipping Overview
              </Typography>
              <Paper className={classes.WidgetContent}>
                <ShippingOverview />
              </Paper>
            </Grid>
          </Grid>

          <Grid container justify="center" spacing={16}>
            <Grid item xs={12} sm={12} md={9}>
              <Grid container justify="center" spacing={16}>
                <Grid key={3} item xs={12} className={classes.Widget}>
                  <Typography
                    variant="subheading"
                    className={classes.WidgetHeading}
                  >
                    Containers
                  </Typography>
                  <Paper className={classes.WidgetContent}>
                    <ContainerTable />
                  </Paper>
                </Grid>

                <Grid key={4} item xs={12} className={classes.Widget}>
                  <Typography
                    variant="subheading"
                    className={classes.WidgetHeading}
                  >
                    Status History
                  </Typography>
                  <Paper className={classes.WidgetContent}>
                    <HistoryTable />
                  </Paper>
                </Grid>
              </Grid>
            </Grid>

            <Grid
              key={5}
              item
              xs={12}
              sm={12}
              md={3}
              className={classes.Widget}
            >
              <Typography
                variant="subheading"
                className={classes.WidgetHeading}
              >
                Latest Position
              </Typography>
              <Paper className={classes.WidgetContent}>
                <MapWidget onShippingOverview={this.inputChange.bind(this)} />
              </Paper>
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
}

shippingInformation.propTypes = {
  classes: PropTypes.shape({}).isRequired
};

export default withStyles(styles, { withTheme: true })(shippingInformation);

Child

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";

import { Bar } from "react-chartjs-2";
import CountUp from "react-countup";
import classNames from "classnames";

import themeStyles from "./shipping-overview.theme.style";

const styles = theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200
  },
  menu: {
    width: 200
  }
});

export class ShippingOverview extends React.Component {
  state = {
    searchString: null
  };

  handleChange(event){
    this.setState ({ searchString: event.target.value}, () => {
      this.props.onShippingOverview(this.state.searchString);
    })
    // this.props.onShippingOverview(input);
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes["shipping-overview-widget"]}>
        <div>
          <form className={classes.container} noValidate autoComplete="off">
            <TextField
              ref="result"
              id="full-width"
              label="Tracking ID"
              InputLabelProps={{
                shrink: true
              }}
              placeholder="Placeholder"
              fullWidth
              margin="normal"
              onChange={this.handleChange.bind(this)}
              value={this.state.input}
            />
          </form>
        </div>
      </div>
    );
  }
}

ShippingOverview.propTypes = {
  theme: PropTypes.shape({
    palette: PropTypes.shape({
      primary: PropTypes.shape({
        dark: PropTypes.string,
        main: PropTypes.string,
        light: PropTypes.string,
        contrastText: PropTypes.string
      }),
      secondary: PropTypes.shape({
        main: PropTypes.string
      }),
      common: PropTypes.shape({
        white: PropTypes.string
      })
    })
  }).isRequired,
  classes: PropTypes.shape({}).isRequired
};

export default withStyles(themeStyles, { withTheme: true })(ShippingOverview);

When i now check in the child file only to check the state of searchString it (with console.log()) it seems to work. But as soon as i let it run trough the handleChange function in the child it gives me this error:

> > TypeError: _this2.props.onChild is not a function

33 | handleChange(event){

34 | this.setState ({ searchString: event.target.value}, () => {

> 35 | this.props.onChild(this.state.searchString);

hope someone can help. btw im a noob...

9
  • Could you include your entire components? There might be something else going on in the surrounding elements in the render method, this code shows nothing wrong. Commented Jul 15, 2018 at 18:20
  • 1
    okay done. tought it might be to much. Commented Jul 15, 2018 at 18:24
  • Curious why you are storing the searchString state inside of the child and the parent, can't you simplify things and just called the parent function to set its state's searchString ? Commented Jul 15, 2018 at 18:28
  • I'm have no experience with the material ui library, but maybe the withStyles HOC makes it so the props are not passed in properly? Commented Jul 15, 2018 at 18:30
  • @WilliamChou, how do you mean. since i want it not on a submit but with every letter added in the textfield i tought i needed a state change after every letter. Commented Jul 15, 2018 at 18:36

1 Answer 1

1

You are using the wrong component in your parent component. Your child component is imported as ShippingOverview but you are using MapWidget. Change to ShippingOverview and it will work.

<ShippingOverview onShippingOverview={this.inputChange} />
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.