Getting problem in flatlist of react native

Question

I am calling an API and in which and rendering its data in flatlist but my flatlist is displaying data by every alphabat seprately. It should be a complete string.

    export default class LiveStream extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videodata: [],
    };
  }

  componentDidMount(search) {
    axios
      .get(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
      )
      .then((res) => {
        // console.log(res.data.items[0].id.videoId);

        this.setState({
          videodata: res.data.items[0].id.videoId,
        });
      })
      .catch((error) => {
        console.log('Data not loaded');
      });
  }
  render() {
    console.log(this.state.videodata);
    const {videodata} = this.state;
    return (

        <FlatList
          data={videodata}
          renderItem={({item}) => {
            console.log(item);
            return (
              <View style={{justifyContent: 'center', flex: 1}}>
                <YouTube
                  videoId={item.concat('')}
                  play={true}
                  style={{height: 300, bottom: 20}}
                  apiKey={'AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI'}
                />
              </View>
            );
          }}
        />
  }
}

In console.log I am getting

Answer 1

Unnecessary use of FlatList as you are rendering single item inside also your array converted into an array of characters that's why you are seeing single character in the console. You only need id so you can only get the id from response and store in the state. I have done a few changes into your code I hope it will work for you.

  export default class LiveStream extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videodata: null,
    };
  }

  componentDidMount(search) {
    axios
      .get(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
      )
      .then((res) => {
        // console.log(res.data.items[0].id.videoId);

        this.setState({
          videodata: res.data.items[0].id.videoId,
        });
      })
      .catch((error) => {
        console.log('Data not loaded');
      });
  }
  render() {
    console.log(this.state.videodata);
    const {videodata} = this.state;
    return (
              <View style={{justifyContent: 'center', flex: 1}}>
                 { this.state.videodata !== null &&
                <YouTube
                  videoId={item.concat('')}
                  play={true}
                  style={{height: 300, bottom: 20}}
                  apiKey={'AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI'}
                />
                }
              </View>
  }
}