Why does React.js axios data show in console but not on the screen?

user_14732815 0
Viewed 881

I'm making a React Axios Project with https://swapi.dev/api/films/, the characters data shows another API link so I make an Axios loop to show characters name. The characters name can show in console, so it should be success but the name is not showing on the screen. Already return the data but still not showing.

This is the web app picture:

enter image description here

This is the full code:

import React, { Component } from "react";
import axios from "axios";


class MovieDetail extends Component {
  state = {
    showMovieDetail: false,
  };

  movieListClicked = () => {
    this.setState({ showMovieDetail: !this.state.showMovieDetail });
  };

  getCharactersDetails = () => {
    const charsAPILink = this.props.characters;

    const charData = return charsAPILink.map((data) => {
      axios.get(data).then((response) => {
        console.log(response.data.name);
        return response.data.name;
      });
    });

    return charData;

  };

  render() {
    return (
      <div className="MovieDetail" onClick={this.movieListClicked}>
        {!this.state.showMovieDetail ? (
          <h2>{this.props.title}</h2>
        ) : (
          <div>
            <h3>
              Title : {this.props.title} <br />
              Episode : {this.props.episode} <br />
              {this.props.opening} <br />
              Director : {this.props.director} <br />
              Producer : {this.props.producer} <br />
              Date : {this.props.date} <br />
              Characters : {this.getCharactersDetails()}
            </h3>
          </div>
        )}
      </div>
    );
  }
}

export default MovieDetail;
axios reactjs javascript
2 Answers

You are trying to write the async data in render function and hence it is not going to show.

You can save data in state and update the state.

import React, { Component } from "react";
import axios from "axios";


class MovieDetail extends Component {
  state = {
    showMovieDetail: false,
    charData: []
  };

  movieListClicked = () => {
    this.setState({ showMovieDetail: !this.state.showMovieDetail });
  };

 componentDidMount() {
   this.getCharactersDetails()
}

  getCharactersDetails = () => {
    const charsAPILink = this.props.characters;
    const temp = []
    
    charsAPILink.map((data) => {
      temp.push(axios.get(data))
    });
    
  promise.all(temp)
   .then(res => res)
    .then(responses => promise.all(responses.map(r => r.json()))
      .then(data => this.setState({charData: data}))
  };

  render() {
    return (
      <div className="MovieDetail" onClick={this.movieListClicked}>
        {!this.state.showMovieDetail ? (
          <h2>{this.props.title}</h2>
        ) : (
          <div>
            <h3>
              Title : {this.props.title} <br />
              Episode : {this.props.episode} <br />
              {this.props.opening} <br />
              Director : {this.props.director} <br />
              Producer : {this.props.producer} <br />
              Date : {this.props.date} <br />
              Characters : {charData.map(item => {
                 return (<span> { item.name } </span>)
              }}
            </h3>
          </div>
        )}
      </div>
    );
  }
}

export default MovieDetail;
user_21493610

You are not returning the axios response to map function, and also better to use async await to wait till the api response and then return. Try this :-

getCharactersDetails = async () => { const charsAPILink = this.props.characters;

const charData = await getChars(charsAPILink )
return charData

};

async function getChars(charsAPILink) {
  let allChars = [];
  for (let i = 0; i < charsAPILink.length; i++) {
    await axios.get(charsAPILink[i]).then((response) => {
      allChars.push(response.data.title);
    });
  }
  return allChars;
}
user_116886220
Related