Construí una aplicación de reacción, usando el componente Scroll fuera del componente CardList. Usé el desbordamiento de estilo dentro del elemento div en el archivo Scroll.js. Cuando no uso el desbordamiento de estilo, CardList (componente secundario) muestra el contenido, pero con estilo no lo hace. No sé qué error cometí.

archivo app.js

 render() { const filteredRobots = this.state.robots.filter( robot =>{ return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase()); }) if(this.state.robots.length === 0){ return <h1>Loading</h1> } else { return ( <div className='tc'> <h1 className='f1'>RoboFriends</h1> <Searchbox searchChange={this.onSearchChange} /> <Scroll> <CardList robots={filteredRobots} /> </Scroll> </div> ); } }

Archivo Scroll.js

 import React from 'react'; const Scroll = (props) => { return ( <div style={{overflowY: 'scroll',border:'1px solid red',height:'600px'}}> {props.childern} </div> ); } export default Scroll;

Archivos completos: https://drive.google.com/drive/folders/1mCWnQhOyf0TuzUJhzwxGa3bnAt3bULmb?usp=sharing