如何在同一页面上呈现不同的组件

Question

I have a simple react movies app, search bar component for searching a specific movie and main content component that shows popular movies.

when a user search for a specific movie the movie is displayed under the search bar component and I want that the movie will be displayed instead of the main content component, I try to do it with useState but got nothing

here is my code:

import React from 'react'
import MainContent from '../../component/MainContent/MainContent'
import SearchBar from '../../component/SearchBar/SearchBar'

export default function HomePage() {
    return (
        <div>
            <SearchBar />
            <MainContent />
        </div>
    )
}

import React, { useState, useEffect } from 'react';
import Slider from "react-slick";
import Loading from '../Loading';
import './mainContent.css';
import MovieCard from '../MovieCard/MovieCard';

export default function MainContent() {

    const [allMovies, setAllMovies] = useState([]);
    const [isLoading, setIsLoading] = useState(false);

    const moviesDisplay = async () => {
        try {
            setIsLoading(true);
            const api_url = 'http://localhost:4000/movies';
            await fetch(api_url)
                .then(res => res.json())
                .then(results => {
                    // console.log(results.results)
                    setAllMovies(results.results)
                })
        } catch (err) {
            console.error('failed to fetch');
        } finally {
            setIsLoading(false);
        }
    }
    useEffect(() => {
        moviesDisplay();
    }, []);

    const settings = {
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 2,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    infinite: true,
                }
            }, {
                breakpoint: 800,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    initialSlide: 1
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    initialSlide: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    };

    return (

        <div className='moviesContainer'>
            <div className='moviesCarousel'>
                {isLoading && <Loading />}
                <Slider {...settings}>
                    {allMovies && allMovies.filter(movie => movie.poster_path).map((movie) =>
                        <div className="movieCard" key={movie.id}>
                            <MovieCard poster_path={'https://image.tmdb.org/t/p/w300' + movie.poster_path} title={movie.title}
                                release_date={movie.release_date} vote_average={movie.vote_average} overview={movie.overview} />
                        </div>
                    )}
                </Slider>
            </div>
        </div>
    )
}

import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Loading from '../Loading';
import MovieCard from '../MovieCard/MovieCard';

import './searchBar.css';

export default function SearchBar(props) {

    const [movies, setMovies] = useState([]);
    const [query, setQuery] = useState('');
    const [isLoading, setIsLoading] = useState(false)

    const movieSearch = async (API) => {
        setIsLoading(true);
        await fetch(API)
            .then((res) => res.json())
            .then((data) => {
                setMovies(data.results[0])
                setIsLoading(false)
            });
    }

    const handleSubmit = (e) => {
        console.log(query)
        if (query !== '') {
            movieSearch(
                `http://localhost:4000/movie/${query}`
            )
            setQuery('')
        }
        e.preventDefault()
    }

    const handleChange = (e) => {
        setQuery(e.target.value)
    }

    return (
        <>
            <div className='searchMovieInput'>
                <form onSubmit={handleSubmit}>
                    <input type="text" placeholder="Search.." value={query} onChange={handleChange} />
                    <button type="submit"><FontAwesomeIcon icon='search' size='lg' color='chocolate' /></button>
                </form>

                {isLoading && <Loading />}
                <div className="movie-card">
                    <MovieCard poster_path={movies.poster_path} {...movies} key={movies.id} />
                </div>
            </div>
        </>
    )
}

Answer 1

You need share state between components SearchBar and MainContent. I know how to do this with Context or State management like redux, Mobx

import React from "react";

const Context = React.createContext({
    visibleMainContent: true,
    setVisibleMainContent: () => {},
});

const SearchBar = (props) => {
    const {visibleMainContent, setVisibleMainContent} = React.useContext(Context)
    return <div>
        <button onClick={()=> setVisibleMainContent(!visibleMainContent)}>{visibleMainContent ? "Hide" : "Show"}</button>
    </div>;
};

const MainContent = (props) => {
    const {visibleMainContent} = React.useContext(Context)
    return <div style={{display: visibleMainContent ? "block" : "none"}}>Main Content</div>;
};

export default function App () {
    const [visibleMainContent, setVisibleMainContent] = React.useState("en");
    const visibleMC = { visibleMainContent, setVisibleMainContent };
    return (
        <Context.Provider value={visibleMC} >
            <div>
                <SearchBar />
                <MainContent />
            </div>
        </Context.Provider>
    );
};