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...
searchStringstate inside of the child and the parent, can't you simplify things and just called the parent function to set its state'ssearchString?withStylesHOC makes it so the props are not passed in properly?