searchwithapireact

 blog.jsx

import React, { useState,useEffect } from 'react'

import axios from 'axios';

import Table from './Table';

export default function Blog() {

    const [data,setdata]=useState([]);

    const [name, setName] = useState("");

    useEffect(()=>{

axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res=>{

    console.log(res.data);

    setdata(res.data);

}).catch(err=>{

    console.log(err);

})

    },[])

    const search=(data)=>{

      console.log(name);

      return data.filter((item)=>item.title.toLowerCase().includes(name))

    }

  return (

    <div>

      <input type="text"  value={name}

          onChange={(e) => setName(e.target.value)}  />

      {/* <Table info={data}/> */}

      <Table info={search(data)}/>

    </div>

  )

}

table.jsx

import React from 'react'

const Table=({info})=> {

  return (

    <div><table>

        <thead>

    <tr>

      <th>Id</th>

      <th>title</th>

      <th>body</th>

    </tr>

    </thead>

    <tbody>

  {info.map(e=><tr key={e.id}>

    <td>{e.id}</td>

    <td>{e.title}</td>

    <td>{e.body}</td>

    </tr>)}

    </tbody>

  </table></div>

  )

}

export default Table;