map through list stored in state - react

Question

I'm trying to map through a list that is stored in the state and pass each item in the list as a prop to another component. Here is what it looks like. The video component is supposed to receive each item from the playlist, title, and description lists then render each video, appropriate title and description until the playlist is over. It seems like the code is rendering the video component but nothing actually shows up.

This is the component that fetches the data and calls the video component.

export class YoutubeFetch extends Component {
  constructor(props) {
    super(props)

    this.state = {
      playlist: [],
      title: [],
      description: [],
      thumbnails: [],
    };
  }

  componentDidMount() {
    return fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        // console.log('responseJson', responseJson)
        const playlist = responseJson.items.map(obj => "https://www.youtube.com/embed/" + obj.snippet.resourceId.videoId);
        this.setState({ playlist });
        const description = responseJson.items.map(obj => obj.snippet.description);
        this.setState({ description });
        const thumbnails = responseJson.items.map(obj => obj.snippet.thumbnails.default.url);
        this.setState({ thumbnails });
        const title = responseJson.items.map(obj => obj.snippet.title);
        this.setState({ title });
      })
      .catch((error) => {
        console.log(error)
      })
  }

  render() {
    return (
      <Container>
        <Row>
          {this.state.playlist.map((index) =>
            <Video
              key={index}
              video={this.state.playlist[index]}
              title={this.state.title[index]}
              description={this.state.description[index]}
            />
          )}
        </Row>
      </Container>
    )
  }
}

This is the video component. In the video component, I added a test h1 to see whats happening. The test h1 renders with gaps in between where it seems like the video and etc are supposed to render.

function Video(props) {
  return (
    <Container>
      <Row>
        <h1>test</h1>
        <ReactPlayer
          controls
          url={props.video}
          // height="75%"
          playing={false}
          width="100%"
        />
      </Row>
      <Row>
        <h1>{props.title}</h1>
        <p>{props.description}</p>
      </Row>
    </Container>
  )
}

export default Video

Syed Aman Ali · Accepted Answer · 2023-02-22 18:07:31Z

0

first of all, do not use class components now.

the issue is here

video={this.state.playlist[index]}

this index is not number based value it is the value present in the array of playlist

to access the number use the second parameter in the map

 {this.state.playlist.map((value,index) =>

answered Feb 22, 2023 at 18:07

Syed Aman Ali

2282 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jellychews Over a year ago

Thank you! This solved my problem.. Missed the second parameter. Curious why I shouldn't use class components? Is it outdated?

Syed Aman Ali Over a year ago

yes, it is outdated. if you look at new react docs all examples are based on functional components. beta.reactjs.org

umer shaik · Accepted Answer · 2023-02-22 18:24:45Z

0

You can do this this way too . create a render function that stores all your components in one array and then return it

const renderMyList = () =>{
mylist = [];
for(let i = 0; i<this.state.playlist.length;i++){
mylist.append(<Video
              key={i}
              video={this.state.playlist[i]}
              title={this.state.title[i]}
              description={this.state.description[i]}
            />) 
}
return mylist;
}

and finally, call this render function

render() {
    return (
      <Container>
        <Row>
          {renderMyList()}
        </Row>
      </Container>
    )
  }
}

answered Feb 22, 2023 at 18:24

umer shaik

355 bronze badges

1 Comment

Syed Aman Ali Over a year ago

good approach , clean code

Collectives™ on Stack Overflow

map through list stored in state - react

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related