Trainers.js

import React from 'react';
import TrainerCover from './TrainerCover/TrainerCover';
import Loading from '../../Components/Loading/Loading';

export default class Trainers extends React.Component {

    constructor() {
        super();
        this.state = { trainersData: [] };
    }

    componentDidMount() {
        fetch('/rest/profiles')
            .then(res => res.json())
            .then(trainersData => this.setState({ trainersData }))
    }

    searchTrainer(input) {
        const searchInput = input.toUpperCase();
        function transform(input) {
            return input
                .toUpperCase()
                .includes(searchInput);
        }
        return this.state.trainersData
            .filter(person => (
                transform(person.id) ||
                transform(person.fullname) ||
                transform(person.address) ||
                transform(person.type) ||
                transform(person.description)
            ));
    }

    inputHandler(event) {
        let value = event.target.value;
        this.setState({ personTrainers: this.state.trainersData.length });
        return this.searchTrainer(value).length > 0 ?
            this.setState({ trainersData: this.searchTrainer(value) }) :
            this.componentDidMount();
    }

    render() {
        let trainers = this.state.trainersData;
        if (!trainers) {
            return <Loading />;
        }
        return (
            <div>
                <h2>Find your nearest trainer</h2>
                <input type="text" placeholder="Search for your type of discipline" onChange={e => this.inputHandler(e)} />
                <div className='container'>
                    {
                        trainers.map(trainer => (
                            <TrainerCover
                                key={trainer.id}
                                id={trainer.id}
                                firstname={trainer.firstname}
                                lastname={trainer.lastname}
                                address={trainer.address}
                                type={trainer.type}
                                rate={trainer.rate}
                                map={trainer.map}
                                src={trainer.src}
                                alt={trainer.lastname}
                            />
                        ))
                    }
                </div>
            </div>
        );
    }
}