You should first move your single movie in a different component, and the using the component internal state toggle an expanded variable that will tell you if to show the entire movie overview or the truncated part
import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css'
// Append in order to retrive images
const base_url = 'https://image.tmdb.org/t/p/original/';
function truncate(str, n) {
return str?.length > n ? str.substr(0, n - 1) + '...' : str;
}
const Movie = ({ movie }) => {
const [expanded, setExpanded] = useState(false);
return(
<div className='bic'>
<img
key={movie.id}
className={`row__poster ${isLargeRow && "row__posterLarge"}`}
src={`${base_url}${isLargeRow ? movie.poster_path : movie.backdrop_path}`}
alt={movie.name}
/>
<p>{movie.original_title || movie.name}</p>
<span>Rating: {movie.vote_average}</span>
<p>Polularity: {movie.popularity}</p>
<p className='desc'>{expanded ? movie.overview : truncate(movie.overview, 350)}</p>
<button onClick={() => setExpanded(!expanded)}>Read more</button>
</div>
)
}
function Row({ title, fetchUrl, isLargeRow }) {
const [movies, setMovies] = useState([]);
useEffect(() => {
async function fetchData() {
const request = await axios.get(fetchUrl);
setMovies(request.data.results);
return request;
}
fetchData();
}, [fetchUrl]);
console.log(movies);
return (
<div className='row'>
<h1>{title}</h1>
<div className='row__posters'>
{movies.map((movie) => (
<Movie movie={movie} />
))}
</div>
</div>
);
}
export default Row;
CLICK HERE to find out more related problems solutions.