Load component on onClick of li in React - reactjs

Question

In my application, On the launch of the application, I am displaying a character from the provided JSON file.
Upon selecting a character the UI should update and display details on each of the films the character appears in. For that, I have made MovieDetails component which makes API calls ( API URL’s provided in the JSON file and the data returned from those calls ).
I am trying to fetch movie details when user click on first li (Luke Skywalker) for that I am using a switch case in handleClick(). But it's not working. Can anyone suggest me how to update the UI when the user click on li?
App.js
import React, { Component } from 'react'
import charactersFile from "./data/characters.json"
import MovieDetails from "./MovieDetails";
import './App.css';
class App extends Component {
state = {
render: false
}
handleClick = (character) => {
console.log(character.name);
this.setState({ render: true })
}
render() {
const list = <ul>
{
charactersFile.characters.map(character => {
return <li key={character.name} onClick={() => this.handleClick(character)}>{character.name}</li>
})
}
</ul>
return (
<React.Fragment>
{this.state.render ? list : <MovieDetails />}
</React.Fragment>
)
}
}
export default App
MovieDetails.js
import React, { Component } from 'react'
import axios from 'axios';
class MovieDetails extends Component {
state = {
movies: []
}
componentDidMount() {
const PeopleUrl = `https://swapi.co/api/people/`;
const FilmUrl = `https://swapi.co/api/films/`
axios.get(`${PeopleUrl}1/`)
.then(response => Promise.all([
axios.get(`${FilmUrl}2/`),
axios.get(`${FilmUrl}6/`),
axios.get(`${FilmUrl}3/`),
axios.get(`${FilmUrl}1/`),
axios.get(`${FilmUrl}7/`)
]))
.then(result => result.map(values =>
this.setState({
movies: [
...this.state.movies,
{ title: values.data.title, release_date: values.data.release_date }
]
})))
}
render() {
console.log(this.state.title)
return (
<div className="App">
<ul>
{this.state.movies.map(movie => (
<li key={movie.title}>
{movie.title} - {movie.release_date}
</li>
))}
</ul>
</div>
)
}
}
export default MovieDetails
characters.json
{
"characters": [
{
"name": "Luke Skywalker",
"url": "https://swapi.co/api/people/1/"
},
{
"name": "C-3PO",
"url": "https://swapi.co/api/people/2/"
},
{
"name": "Leia Organa",
"url": "https://swapi.co/api/people/unknown/"
},
{
"name": "R2-D2",
"url": "https://swapi.co/api/people/3/"
}
]
}
output:

Answer 1

Note: React only renders DOM elements inside a render function. If you return a components inside any other functions (in your case you are returning a component inside onClick function) you should not expect react renders a new content or a component.
Right now your onClick gets called upon a user's interaction. So you need to tell react to re-render the page and based on the current state renders different contents or components. As you probably know in order for react to re-render the page you need to set the state so inside your onClick
set your state to whatever your logic is this.setState({ ... }). Then inside your render function you can check the current state value that you just set inside onClick method whether to display <MovieDetails /> or something else.
Example: https://jsfiddle.net/pr0bwg3L/5/