Текстовое поле не должно быть видимым / отображаться на карту внутри Home. js и должно отображаться на карту внутри другого js файла

Question

Я новичок в реактивном программировании, я не уверен, как реализовать «текстовое поле», которое не должно быть видно карточке в Home. js страница и должно быть видно другим страницам О. js, contact. js и Product. js

у меня есть карточка. js функциональный компонент, который отправляет всем карточкам, присутствующим в доме. js, о. js и двух других страницах

Я просто хочу реализовать таким способом, он не должен отправлять текстовое поле на главную, текстовое поле на карте должно быть видно на других страницах.

card.js

import React from 'react';
import {
    Card, CardImg, CardText,
    CardTitle,Button
  } from 'reactstrap'; 
import './card-style.css';

function Charactercard(props){
      return (
        <div className='card text-center shadow' >
      <Card>
           <div className='overflow'>
            <CardImg src={props.image} alt='Image 1' className='card-img-top' />
          </div>
            <CardTitle>{props.name}</CardTitle>
            <CardText>{props.occupation}</CardText>
            <div><input type = "text" className="input" placeholder="Search.."/></div>
            }
            <Button onClick={()=>props.handler(props.path)} variant="btn btn-success">Click</Button>
      </Card>  
      </div>
    );
  }


export default Charactercard;

Home.js

import React from 'react';
import characters from './characters.json';
import CharacterCard from './CharacterCard';
import history from './history';

function Home(){
  let handler = (path)=> {history.push(path)}
    return (
      <div className="Home">
        <div className='container-fluid d-flex justify-content-center'>
          <div className='row'>
      {characters.map(character => (
        <div className='col-md-4'>
          <CharacterCard 
            name={character.name}
            image={character.image}
            occupation={character.occupation}
            handler = {handler}
            path = {character.path} 
          /></div>
        ))}
      </div>
    </div>
  </div>
    );
  }


export default Home;