Intenté de esta manera, pero no aparecen datos y, mientras compilo, no recibo ningún error. Soy nuevo en reaccionar, gracias de antemano
const Students = (props) => { let id = props.students; const [studentsData, setStudentsData] = useState(null); const url = "http://localhost:2021/students-data/" + id; console.log(url); useEffect(() => { axios.get(url).then((res) => { setStudentsData(res.data); }); }, [url]); if (!studentsData) { return <Spin />; } // console.log(studentsData) return ( <List dataSource={studentsData} renderItem={(item) => { <List.Item key={item._id}> <Collapse style={{ minWidth: "257px" }}> <Panel header={item.name}> <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}> <Col className="gutter-row index" span={8}> <div>Year Of Batch</div> </Col> <Col className="gutter-row value" span={16}> <div>{item.yearOfBatch}</div> </Col> </Row> <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}> <Col className="gutter-row index" span={8}> <div>Skills</div> </Col> <Col className="gutter-row value" span={16}> <div> {item.skills.map((e) => { return e + " , "; })} </div> </Col> </Row> </Panel> </Collapse> </List.Item>; }} /> ); }; export default Students;¿Por qué los datos no se representan cuando asigné el colapso al atributo renderItem? ¿Cuál es el problema principal aquí? y cómo modificar el código actual para que funcione correctamente
Te perdiste la palabra clave de return dentro de los accesorios de renderItem
debería ser así
//... renderItem={(item) => { return (<List.Item key={item._id}> <Collapse style={{ minWidth: "257px" }}> //...En este caso funciona como se esperaba.