I'm learning ReactJS and I want to map a json in a father component from child search bar. So I got this:

export default class Child extends Component {
    
    constructor(props) {
        super(props)
        this.state = { data:[], value: '' };
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    guardar = (data) => {
        this.setState({ data })
        this.props.parentCallback({ data })
    }
    handleChange(e) {
        this.setState({ value: e.target.value }) 
        axios.get(`http://localhost:3001/api/search?query=${ e.target.value }`)
            .then(( { data } ) => this.guardar(data) )
    }
    handleSubmit(e) { 
        e.preventDefault()
     }

    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                <input  type="text" 
                        name='searchbar'
                        onChange={this.handleChange}/>
            </form> 
        )
    }
} 


export default class Parent extends Component {
    state = {
        data: [],
    }

    handleCallback = (childData) => {
        this.setState({
            data: childData
        })
        console.log(this.state.data);
    }

    render() {
        const { data } = this.state
        return(
            <div>
                <SearchBar parentCallback = {this.handleCallback}/>
                <ProductCard />
                { [data].map( res => <li key={res.id}>{ res.title }</li>) }
            </div>
            
            
        )
    }
} 

Here is the result:

I want to map if even if the array is empty, in the console shows me the 50 elements only if I write more than twice in the input and I want them when I reload the page. Beforehand thank you very much!!