filtering through an array of JSON objects by UI

I want to display a list of Dogs with a search bar above which when typed in will only display the dogs which meet the criteria.

I previously had the array stored in state and everything was working fine. However now, looking forward once up and running I will have thousands of entries inside of the array and it will get too messy. So I have decided that I wish to store all of my objects in JSON format as it will be a lot easier to manage I believe.

I'm stuck, I have tried to integrate the .json file into the old format but I am not getting any data come up and when I type in the searchbar i get an error message.

here is my json:

[
 {
  "id": 3,
  "title": "Sir",
  "content":"My name is Sir Jeffrey"
 },
 {
  "id": 4,
  "title": "Prince",
  "content": "My name is Prince Gareth"
 },
 {
  "id": 5,
  "title": "Princess",
  "content": "My name is Princess Roy Roy"
},
{
 "id": 6,
 "title": "King",
 "content": "My name is King George"
}

]

My App.js:

import React from 'react';
import './App.css';
import DogsList from './components/dogslist.js';


function App() {
  return (
    <div className="App">
     <DogsList/>
    </div>
  );
}

export default App;

My List function:

import React, {Component} from 'react';
import Dog from './listlayouts.js';



 function DogList(postDetail){
  let dogs = postDetail.filteredDogs.map((dog, i) => {
    return <Dog key={postDetail.id} Name={postDetail.title} Content= 
   {postDetail.content}/>
   })
  return(
  <div>
    {dogs}
  </div>
  )
 };

 export default DogList;

List Layout:

import React, {Component} from 'react';

function Dog(postDetail){
  return(
    <div>
    <p>Name: {postDetail.title}</p>
    <p>Content: {postDetail.content}</p>
    </div>
  )
 }

export default Dog;

Search box function:

import React, {Component} from 'react';

function DogSearchBox(postDetail){
  return (
    <div>
     <input onChange={postDetail.handleInput} type ='text'/>
    </div>
  )
}

export default DogSearchBox;

And the Doglist component which should render with a empty searchbar above the list of all dogs and then the list should change once the User types in the searchbar.

import React, {Component} from 'react';
import DogList from './listfunctions.js';
import DogSearchBox from './searchboxfunctions.js';
import postData from './dogs.json';


class DogsList extends Component {
  constructor(props){
    super(props);
    this.state = {
      dogs: [
        <div>
          {postData.map((postDetail, index) => {
            return(
              <div>
               <h2>{postDetail.title}</h2>
               <p>{postDetail.content}</p>
              </div>
            )
          })}

         </div>
      ],
      searchDog:''
    }
  }

  handleInput = (e) => {
    this.setState({searchDog: e.target.value})
  }

  render() {

    let filteredDogs = this.state.dogs.filter(dog => 
    Object.values(dog).some(val => 
    val.toString().toLowerCase().includes
    (this.state.searchDog.toLowerCase())))

    return (
     <div>
      <header>
      <h1>Dogs</h1>
      </header>
      <div>
      <DogSearchBox handleInput = {this.handleInput}/>
      <DogList filteredDogs = {filteredDogs}/>
     </div>
     </div>
    );
  }
}

export default DogsList;

I am still new to it all but I have a feeling i will no longer need all of these components. I am more then happy to simplify it as much as possible. Just as long as it works as intended.