При изменения состояния, обновляется полный родительский div, а нужно отследить вот это обновление состояни, чтобы обновить ту часть контента

import React, {useState} from 'react';
import styles from './HomePage.module.css';
import { connect } from 'react-redux';

import { fetchVideoByQuery, fetchCommentsForVideo } from '../../actions/index';
import YouTube from 'react-youtube';

const HomePage = (props) => {
    const [searchText, setSearchText] = useState(null);

    const { isLoading, videos, fetchVideoByQuery, fetchCommentsForVideo, nextPageToken, videoComments } = props;
    console.log(props)

    const searchByQuery = () => {
        fetchVideoByQuery(searchText);
    }

    const onSearchTextChange = (e) => {
        setSearchText(e.target.value);
    }

    const loadMoreData = () => {
        fetchVideoByQuery(searchText, nextPageToken);
    }

    const showComments = (videoId) => {
        fetchCommentsForVideo(videoId);
    }

    if (isLoading) {
        return <p>Loading...</p>
    }

    return <div>
        <div className={styles.videoSearchForm}>
            <form>
                <input type="text" value={searchText} onChange={onSearchTextChange} placeholder="What do you want to watch?"/>
                <button type="button" onClick={searchByQuery}>Search</button>
            </form>
        </div>
        <div className={styles.videoFrame}>
            
            {videos.length > 0 && videos.map((video, index) => <div key={index} >
                {video.map((item, index) => <div key={index}>
                    <YouTube opts={{ width: '100%' }} videoId={item.id.videoId}/>
                    <button type="button" onClick={() => showComments(item.id.videoId)}>Show comments</button>
                </div>
                )}
             </div>)
            }
        </div>
        <div className={styles.showMoreContainer}>
            <button type="button" onClick={loadMoreData}>Show more</button>
        </div>
    </div>
}

export default connect(
    state => ({
        isLoading: state.videoReducer.isLoading,
        videos: state.videoReducer.videos,
        nextPageToken: state.videoReducer.nextPageToken,
        videoComments: state.videoReducer.videoComments,
    }), { fetchVideoByQuery, fetchCommentsForVideo }
)(HomePage);

Ответы (0 шт):