coding

javascript

Passed state is undefined in child component React

This is why your props could be undefined in a child component in React.

/Passed%20state%20is%20undefined%20in%20child%20component%20React

Undefined props in your child component.

One of the reasons that it gets undefined is because props are not being passed consistently in both components, heres why:

Let’s say you have a functional component that looks like this:

...
const Product = (props) => (
  <div className="ProductItem">
    <h2>{props.product.title}</h2>
    <p>{props.product.price}</p>
    {props.imported ? <button>Add to import list</button> : ""}
  </div>
);

export default Product;

Then you import that component into two different components.

Component one:

In this component you pass the imported prop

...
class ImportList extends Component {
  render() {
    return (
      <div className="ImportListContainer">
        <h2>Products to import</h2>
        <Product imported={true} />
      </div>
    );
  }
}

export default ImportList;

Component two:

In this component you pass the product prop which would be an entire object

...
class Products extends Component {
  render() {
    const productsList = this.props.prodLst.map((product) => {
      return (
        <Product key={product.id} product={product} />
      );
    });
    return (
      <div className="ProductsContainer">
        <h2>Products list</h2>
        {productsList}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    prodLst: state.prodLst.products,
  };
};

export default connect(mapStateToProps, null)(Products);

So if you are consistent with the props you pass to your child component it shouldn’t get undefined.