1

I want to print to print videos_title, one after other in a loop. But this component prints first name (Popular Movies) only. Component class

class Main extends Component {
  constructor(props) {
    super(props);
  }
    render() {
      var items = this.props.items;
      console.log(items)
      let imgUrl = "https://hostname/t/p/original";
        return (
            <div className="container">      
                <MainTopBanner />
                {items && items.map((item, index) => {
                  var results = item.results;
                  return (
                    <div key={index} className="row text-center">
                      <h5>{item.videos_title}</h5>
                    </div>
                  );
                })}
            </div>
        );
    }
}

export default Main;

items is an array of object 

console.log(items);
[{…}]
0: {page: 1, total_results: 10000, total_pages: 500, results: Array(20), videos_title: "Highest Rated Movies"}
1: {page: 1, total_results: 10000, total_pages: 500, results: Array(20), videos_title: "Popular Movies"}
xman
  • 5
  • 7
  • The expression items && items.map() is a boolean conjunction. It's value is the value of the first term that is truthy. – danh Jan 06 '20 at 15:58
  • 2
    @danh it is the value of the last item that is truthy, IF the first item is truthy, or the first item that is false – TKoL Jan 06 '20 at 16:01
  • 2
    Are you sure it doesnt work? Works fine: https://codesandbox.io/s/long-surf-qgvve?fontsize=14&hidenavigation=1&theme=dark Maybe your style is hidding an item? – Rashomon Jan 06 '20 at 16:05
  • @TKoL quite right, sorry. my ands and ors are mixed up before coffee. – danh Jan 06 '20 at 16:08
  • 1
    Said another way, the boolean conjunction returns the first false-y value or, if none are false-y, the final value. This applies also multiple invocations such as `A && B && C && D && ...`. – Scott Sauyet Jan 06 '20 at 16:08
  • @Rashomon There is no style which hides this. I printed in console.log(item) inside map function, it printed only one value (1st object) – xman Jan 06 '20 at 17:45
  • @xman So maybe the error is in the parent component. Because, as you can see in the link, it works well – Rashomon Jan 06 '20 at 18:17

1 Answers1

0

You may have to set the state, and then fetch the data's from url into the state something like this.. (this.setState([values]: e.target.value), after that you can map map the state

Refer this thread

Logesh P
  • 209
  • 4
  • 18