searchingwithjsondatareact

 MyData.json:

[    

    {"name":"Ram", "email":"ram@gmail.com", "age":23},    

    {"name":"Shyam", "email":"shyam23@gmail.com", "age":28},  

    {"name":"John", "email":"john@gmail.com", "age":33},    

    {"name":"Bob", "email":"bob32@gmail.com", "age":41}   

]

GetJson.jsx:

import React,{useState} from 'react'

import CustomData from './MyData.json'

import MyTable from './MyTable'

export default function Getjson() {

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

// console.log(CustomData);

const SearchData=(CustomData)=>{

    console.log(name);

    // const result=CustomData.filter(e=>e.name===name);

    const result=CustomData.filter(e=>e.name.toLowerCase().includes(name));

    // console.log(result);

    return result;

};

// SearchData();

  return (

    <div>

        <input type="text" name="" 

        value={name}

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

{/* <MyTable info={CustomData}></MyTable> */}

<MyTable info= {SearchData(CustomData)}></MyTable>

    </div>

  )

}

MyTable.jsx:

import React from 'react'

export default function MyTable({info}) {

// console.log(props)

  return (

     

    <div>

         <table>

             <thead>

                 <tr>

                 <th>Name</th>

                 <th>Email</th>

                 <th>AGE</th>

                 </tr>

                 </thead>

                 <tbody>

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

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

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

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

            </tr>)}

        </tbody>

        </table>

    </div>

  )

}