Component returned in map function will not render

react use array map to dynamically render elements
react native map array of objects
render array of components react
react map = array of objects
map is not a function
react native render array of components
do not use array index in keys
react component map

I am trying to display items in a shopping cart. I made a "BagItem" component to display the information about the item, which comes from an object which is in the cart array in state, in redux. I also made a "Bag" component, which is where I map over the cart information and return the "BagItem" component.

Everything seems to be working with the map function. When I console.log the information in the BagItem component, I see all the properties I need to display. The problem is that in the Bag Component, the BagItem component will not render. When I load my webpage, I see the StoreNav and the subtotal text, but the BagItem component does not display.

I am very new to React and I'm sure there is something obvious I'm missing. I've been trying to figure it out all day, and I'd be very grateful for any help you can give.

BAG COMPONENT:

import React, { Component } from "react";
import { connect } from "react-redux";
import StoreNav from "../store/StoreNav";
import BagItem from "../bag/BagItem";
import { getCart } from "../../ducks/reducer";


class Bag extends Component {
constructor(props) {
    super(props);
    this.state={} 
}

componentDidMount(){
  this.props.getCart()

  console.log(this.props.cart)
}

componentDidUpdate(){
  this.props.getCart()
}

render() {

const bagList =

 this.props.cart && this.props.cart.map(element => {
    console.log(this.props.cart)
  return   <BagItem 
  element={element}
  id={element.id}
  key= {`${element.id}${element.name}${element.price}${element.image}${element.size}${element.sleeves}${element.fabric}${element.length}`}
  name={element.name}
  image={element.image}
  size={element.size}
  price={element.price}
  sleeves={element.sleeves}
  fabric={element.fabric}
  length={element.length}

   />

})


return (
  <div>
    <StoreNav />
    {bagList}

    <p>Subtotal</p>


  </div>
);
}
}

const mapStateToProps = state => {
return {
  cart: state.cart
};
};

export default connect(
mapStateToProps,
{ getCart: getCart }
)(Bag);

BAGITEM COMPONENT

 import React, { Component } from "react";
 import { connect } from "react-redux";

 import "./bagitem.css";

 import { getCart } from "../../ducks/reducer";


  class BagItem extends Component {

  componentDidMount(){
    this.props.getCart()
    console.log(this.props.cart[0][0].name)

  }

  render() {

return (
  <div className="bag-item-component-container">

    <div className="bag-item-component">

      <div className="bag-item-row1">
        <div>Size</div>
        <div>Quantity</div>
        <div>Price</div>
        <div>Remove</div>
      </div>
      {/* <div className="bag-item-row2">
    placeholder
    </div> */}
      <div className="bag-item-image-and-details-container">
        <div className="img1">
          <img className="item-image" alt="" src={this.props.cart[0][0].image} />
        </div>
        <div>{this.props.cart[0][0].name}
        <div className="details">
        <div>sleeves</div>
        <div>length</div>
        <div>fabric</div>
        </div>
        </div>
      </div>

    </div>
  </div>
  );
 }
  }

 const mapStateToProps = state => {
return {
  cart: state.cart
};
};

export default connect(
mapStateToProps,
{ getCart: getCart }
 )(BagItem);

You're passing a function to bagList. So, you should call it or you can pass the rendered components to that variable.

const bagList = this.props.cart && this.props.cart.map(element => <BagItem ... />)

Read: https://reactjs.org/docs/lists-and-keys.html

React Map, In React, the ?map? method used to traverse and display a list of similar Instead, it is the standard JavaScript function that could be called on any array. a new array by calling a provided function on every element in the calling array. We assign the new array returned by map() to the variable doubleValue and log it. This is due to the way we're calling our Counter function component. It's not a component at all, but a function. React doesn't know the difference between us calling a function in our JSX and inlining it. So it cannot associate anything to the Counter function, because it's not being rendered like a component.

Generally you do not need to separate your BagItem render. and you already pass element props so use element props inside the BagItem .

import React, { Component } from "react";
import { connect } from "react-redux";
import StoreNav from "../store/StoreNav";
import BagItem from "../bag/BagItem";
import { getCart } from "../../ducks/reducer";


class Bag extends Component {
constructor(props) {
    super(props);
    this.state={} 
}

componentDidMount(){
  this.props.getCart()

  console.log(this.props.cart)
}

componentDidUpdate(){
  this.props.getCart()
}

render() {

return (
  <div>
    <StoreNav />
     {
    this.props.cart && this.props.cart.map(element => (
    <BagItem 
    element={element}
    id={element.id}
    key= {element.id}
     />}))
    <p>Subtotal</p>


  </div>
);
}
}

const mapStateToProps = state => {
return {
  cart: state.cart
};
};

export default connect(
mapStateToProps,
{ getCart: getCart }
)(Bag);

How to For Loop in React (With Examples), Introduced in ES6, the Map array function is by far my most used method of Remember, since the release React 16.8, Class components are no Our functional React component returns a single div element with some JSX inside. on the HTML element that you are rendering inside of the Map function. The component (function) returned by this inner function will be the one you’ll use in your app, so it will take an object with all the properties that it will need to work: function withEither(conditionalRenderingFn, EitherComponent) { return function buildNewComponent(Component) { return function FinalComponent(props) { } } }

I actually got it to work by changing the child component (BagItem) so that it's not receiving the cart props from redux, but instead is just receiving them from the parent component (Bag). I had to make sure to bring props in through the constructor. Here is the revised BagItem component:

import React, { Component } from "react";
import { connect } from "react-redux";

import "./bagitem.css";

 // import { getCart } from "../../ducks/reducer";


 class BagItem extends Component {
 constructor(props){
    super(props)
    this.state={}
 }

// componentDidMount(){
//     this.props.getCart()
//     console.log(this.props.cart[0][0].name)

// }

  render() {
      console.log(this.props.element)

return (
  <div className="bag-item-component-container">

    <div className="bag-item-component">

      <div className="bag-item-row1">
        <div>Size</div>
        <div>Quantity</div>
        <div>Price</div>
        <div>Remove</div>
      </div>
      {/* <div className="bag-item-row2">
    placeholder
    </div> */}
      <div className="bag-item-image-and-details-container">
        <div className="img1">
          <img className="item-image" alt="" src={this.props.element.image} />
        </div>
        <div>{this.props.element.name}
        <div className="details">
        <div>sleeves: {this.props.element.sleeves}</div>
        <div>length: {this.props.element.length}</div>
        <div>fabric {this.props.element.fabric}</div>
        </div>
        </div>
      </div>

    </div>
  </div>
);
}
 }

 // const mapStateToProps = state => {
 //     return {
 //       cart: state.cart
//     };
 //   };

 //   export default connect(
//     mapStateToProps,
//     { getCart: getCart }
//   )(BagItem);


export default BagItem

Connect: Extracting Data with mapStateToProps � React Redux, It does not matter if a mapStateToProps function is written using the function keyword mapping an array of IDs to their corresponding objects, or extracting plain JS Return Values Determine If Your Component Re-Renders. In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output. In the example below, the <WarningBanner /> is rendered depending on the value of the prop called warn. If the value of the prop is false, then the component does not render:

Rendering Arrays in React, In this article you will learn about how to properly render arrays in Using unique keys on collections of components is how React knows what to re-render and not re-render to rework the previous code to omit the use of Array.map() and return function ReptileListItems() { return ( <div> <li>alligator</li>� A map is not the feature of React. Instead, it is the standard JavaScript function that could be called on any array. The map() method creates a new array by calling a provided function on every element in the calling array. Example. In the given example, the map() function takes an array of numbers and double their values.

Use Array.map() to Dynamically Render Elements - JavaScript, Component { constructor(props) { super(props); // change code below this line Why does this line not run into JavaScript error? i mean when we are writing js We are used to putting JSX in the return of the render method but it can also be� Try it on CodePen. This code displays a bullet list of numbers between 1 and 5. Basic List Component . Usually you would render lists inside a component.. We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.

Lists & Conditional Rendering, Given the code below, we use the map() function to take an array of numbers , double their values, and then assigned the new We return an <li> element for each item. If the value of the prop is false, then the component does not render. You cannot return multiple elements (like the array returned by the map function) from the render function. Also, you’re missing a return statement.

Comments
  • One obvious thing is you're not invoking {bagList} - change to {bagList()}, Also move that function outside of the render() method...
  • Does this.props.getCart() triggers a re-render?
  • Also, use react-devtools extension to see what's was rendered in your app.
  • I checked the react-devtools and the BagItem component isn't being rendered. there is nothing between the StoreNav and the subtotal. I'll see if I can figure out if this.props.getCart is re-rendering.