Event ReactJS how to implement?

Question

React

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './clients';



const data=JSON.parse('[\n' +
    '  {\n' +
    '    "general": {\n' +
    '      "firstName": "Liana",\n' +
    '      "lastName": "Crooks",\n' +
    '      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"\n' +
    '    },\n' +
    '    "job": {\n' +
    '      "company": "Ledner, Johnson and Predovic",\n' +
    '      "title": "Investor Functionality Coordinator"\n' +
    '    },\n' +
    '    "contact": {\n' +
    '      "email": "[email protected]",\n' +
    '      "phone": "[phone]"\n' +
    '    },\n' +
    '    "address": {\n' +
    '      "street": "1520 Zemlak Cove",\n' +
    '      "city": "New Devon",\n' +
    '      "zipCode": "42586-7898",\n' +
    '      "country": "Guinea-Bissau"\n' +
    '    }\n' +
    '  },\n' +
    '  {\n' +
    '    "general": {\n' +
    '      "firstName": "Deontae",\n' +
    '      "lastName": "Dare",\n' +
    '      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"\n' +
    '    },\n' +
    '    "job": {\n' +
    '      "company": "D\'Amore, Dicki and Borer",\n' +
    '      "title": "International Applications Consultant"\n' +
    '    },\n' +
    '    "contact": {\n' +
    '      "email": "[email protected]",\n' +
    '      "phone": "1-615-843-3426 x600"\n' +
    '    },\n' +
    '    "address": {\n' +
    '      "street": "65901 Glover Terrace",\n' +
    '      "city": "Alden ton",\n' +
    '      "zipCode": "57744-4248",\n' +
    '      "country": "Kenya"\n' +
    '    }\n' +
    '  }]')

console.log(data)



const Comment = (props) => {
    let { general, job, address } = props

    return (
        <div className="card w-50" styleem="width: 18rem;">
            <img className="card-img-top w-50" src={general.avatar} alt="Card image cap"/>
                <div className="card-body ">
                    <h5 className="card-title">{general.firstName} {general.lastName}</h5>
                    <a href="#" className="btn btn-primary">Info</a>
                </div>
        </div>
    )
}

const CommentList = (props) => {
    return (
        <div>
            {props.comments.map(n => <Comment {...n} />)}
        </div>
    )
}


class App extends Component {

  render() {
    return (
        <div>
            <div className="row">
                <div className="col-4">
                    <div className="input-group mb-3 w-50">
                        <input type="text" className="form-control" placeholder="Recipient's username"/>
                    </div>
                    <CommentList comments={data} />
                </div>
            </div>
        </div>

    );
  }
}

export default App;


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';




ReactDOM.render(
    <div class="container-fluid">
        <h1><span className="badge badge-secondary">User info</span></h1>
        <div>
            <App />
        </div>
    </div>
    , document.getElementById('root'));
registerServiceWorker();

Tell me why parsing from a file does not work for me like this? var comments = JSON.parse('./par.json');
Ask me this question! I need that when I press the button under the person, information about him opens, I made the button, I also wrote the function that needs to be performed when the button is clicked! The value should change to false and draw a new one. But as I understand it, the state of the object is not enough, tell me in which direction to dig!
And secondly, tell me how to properly set up a filter here to do a list search!
Thanks