React and I haven't been the best of friends recently. Passing data between components and working from component to subcomponents, each with different states isn't hasn't been as intuitive for me.
So today, I decided to make the time to find some helpful patterns for structuring your React files.
Components that will probably hold state
- Forms
- Inputs
- Conditional display
General Form.js
state ={ title: "", description: "" } handleChange = (event) => { this.setState({title: event.target.value}) } handleSubmit = (event) => { this.props.newBook(this.state) } ... return ( <form onSubmit={this.handleSubmit}> <input onChange={this.handleChange} value= {this.state.title}> General App.js
state = { books: [] } ComponentDidMount() { fetch(url) .then(res => res.json()) .then(data => { this.setState({books: data}) } handleNewBook = (bookData) => { const newBook = { ...bookData } this.setState({books:[...this.state.books, newBook]}) } render() { return( <NewBookForm onNewBook = {this.handleNewBook} /> <Container books= {this.state.books} /> General Container.js
render() { const books = this.props.books.map(bookData => <Book book={bookData} />) return ( <div> { books } </div> ) General Book.js
<div> <h1> {this.props.book.title} </h1> <p> {this.props.book.content} </p> </div> - Check out this article for a more in-depth look at creating and using React components
- I also recommend this article, which offers a deep dive into passing props between components (although it does use this.state, which I believe makes React more difficult)
Top comments (0)