Así que acabo de empezar a aprender React y ha sido divertido hasta ahora, sin embargo, estoy tratando de dividir mis componentes en secciones para obtener un código más limpio y bonito.
Este es mi componente -
class Papers extends React.Component { // Constructor constructor(props) { super(props); this.state = { items: [], DataisLoaded: false }; } // ComponentDidMount is used to execute the code componentDidMount() { const randomFilmId = Math.floor(Math.random() * 10) + 1 const url ="#" fetch(url) .then((res) => res.json()) .then((json) => { this.setState({ items:json, DataisLoaded: true }); }) .catch ((err) => { console.log("something went wrong ", err) }); } render() { const { DataisLoaded, items } = this.state; if (!DataisLoaded) return <div> <h1> Pleses wait some time.... </h1> </div> ; return ( <div className="auth-box"> <div className="auth-card" key="{item.id}"> <div className = "App"> <h1> Fetch data from an api in react </h1> { items.map((item) => ( <ul key = { item.id } > <li> User_Name: { item.first_name }, </li> <li> Full_Name: { item.middle_name }, </li> <li> User_Email: { item.last_name } </li> </ul> )) } </div> </div> </div> ); } } export default Papers;Pero si quiero poner la siguiente pieza de código en una nueva clase,
<div className="auth-box"> <div className="auth-card" key="{item.id}"> <div className = "App"> <h1> Fetch data from an api in react </h1> { items.map((item) => ( <ul key = { item.id } > <li> User_Name: { item.first_name }, </li> <li> Full_Name: { item.middle_name }, </li> <li> User_Email: { item.last_name } </li> </ul> )) } </div> </div> </div>¿Cómo pasaría todos los accesorios a la nueva clase? Lo siento si esta es una pregunta básica para principiantes.
Agradezco toda la ayuda y el apoyo.
Puede pasar accesorios a componentes secundarios con mucha facilidad.
<Auth userDetails={this.state.items} />Y dentro del nuevo componente de clase, puede acceder a ellos como
this.props.userDetailsEs bastante simple en realidad. solo lo haces
class AuthComponent extends React.Component { render () { return ( <div className="auth-box"> <div className="auth-card" key="{item.id}"> <div className = "App"> <h1> Fetch data from an api in react </h1> { this.props.items.map((item) => ( <ul key = { item.id } > <li> User_Name: { item.first_name },</li> <li> Full_Name: { item.middle_name }, </li> <li> User_Email: { item.last_name } </li> </ul> )) } </div> </div> </div> ); } } y en padre hacer <AuthComponent items={items} />