React read more button

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.

Leave a Comment

Your email address will not be published.

Scroll to Top