Estoy aprendiendo ReactJS y quiero mapear un json en un componente padre desde la barra de búsqueda de niños. Entonces obtuve esto:

 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> ) } }

Aquí está el resultado:

Quiero mapear si aunque el arreglo este vacio, en la consola me muestra los 50 elementos solo si escribo mas de dos veces en el input y los quiero cuando recargo la pagina. De antemano muchas gracias!!