CODEWITHSUNDEEP
javascriptreactjsaxios
Edwin
Edwin

Reputation: 51

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

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;

Upvotes: 2

Views: 1181

Answers (2)

deepak
deepak

Reputation: 1375

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;

Upvotes: 1

Rakesh Vanam
Rakesh Vanam

Reputation: 26

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;
}

Upvotes: 0

Related Questions