Блог

Я новичок в React и получаю данные из https://api.themoviedb.org/3 API.

Когда я получаю название каждого фильма, я хотел бы иметь Read More кнопку после усечения текста, но я изо всех сил пытаюсь этого добиться. Заранее спасибо.

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

    function truncate(str, n) {
        return str?.length > n ? str.substr(0, n - 1)   '...' : str;
    }


    return (
        <div className='row'>
            <h1>{title}</h1>
            <div className='row__posters'>

                {movies.map((movie) => (
                    <div className='bic'>
                        <img
                            key={movie.id}
                            className={`row__poster ${isLargeRow amp;amp; "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'>{truncate(movie.overview, 350)}</p>

                    </div>
                ))}
            </div>
        </div>

    );
}

export default Row;
  

Сначала вы должны переместить свой отдельный фильм в другой компонент, а с помощью внутреннего состояния компонента переключить расширенную переменную, которая сообщит вам, показывать ли обзор всего фильма или усеченную часть

     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 amp;amp; "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;

  

С помощью метода JavaScript string.prototype.substring(positionA, positionB) .

 <p className='desc'>
    {movie.overview.substring(0, 350)}
    <a href="someLink">Read more ...</a>
</p>