Tengo la siguiente <form>
que recoge en su estado lo que se escribe en los dos inputs que tiene:
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', location: ""};
this.handleName = this.handleName.bind(this);
this.handleLocation = this.handleLocation.bind(this);
}
handleName(event){
this.setState({name: event.target.value});
}
handleLocation(event){
this.setState({location: event.target.value});
}
render(){
return (
<div className="user-form">
<div className="input-item">
<label className="label">Update Name: </label>
<input value={this.state.name} onChange={this.handleName} className="input" />
</div>
<div className="input-item">
<label className="label">Update Location: </label>
<input value={this.state.location} onChange={this.handleLocation} className="input" />
</div>
</div>
);
}
};
Lo que quiero es que lo que se recoja en el estado, se lea como props
en los componentes Location.js y Name.js:
const Location = () => {
return (
<div>
<h2 className="is-size-4">
<strong>Location</strong>: {}
</h2>
</div>
);
};
const Name = () => {
return (
<div style={{ marginTop: "30px" }}>
<h2 className="is-size-4">
<strong>Name</strong>: {}
</h2>
</div>
);
};
Como están separados en varios archivos y tendría que pasar props 3 veces, quería usar el React Context y así aprender como se usa pero he visto ya 2 tutoriales y leído los docs (intentado) y no me queda claro como integrar estas dos cosas. (La Form y el Context Provider)
He añadido lo siguiente, el poner las funciones de recoger nombre y localización, en el contexto del Provider:
class MyProvider extends React.Component{
state = {
name: "Javier",
location: "Stack_Over_Flow"
}
render(){
return (
<myContext.Provider value={{
state: this.state,
handleTName: (e) => this.setState({
name: e.target.value
}),
handleTLocation: (e) => this.setState({
location: e.target.value
})
}}>
{this.props.children}
</myContext.Provider>
)
}
}
Pero como las llevo a la Form es mi gran duda
import React from "react";
import ReactDOM from "react-dom";
import ScotchInfoBar from "./ScotchInfoBar";
import "./styles.css";
const myContext = React.createContext()
class MyProvider extends React.Component{
state = {
name: "Javier",
location: "Stack_Over_Flow"
}
render(){
return (
<myContext.Provider value={{
state: this.state,
handleTName: (e) => this.setState({
name: e.target.value
}),
handleTLocation: (e) => this.setState({
location: e.target.value
})
}}>
{this.props.children}
</myContext.Provider>
)
}
}
const Location = () => {
return (
<div>
{/* Display user's location from Context */}
<h2 className="is-size-4">
<myContext.Consumer>
{(context) => (
<p><strong>Location:</strong> {context.state.location}</p>
)}
</myContext.Consumer>
</h2>
</div>
);
};
const Name = () => {
return (
<div style={{ marginTop: "30px" }}>
<h2 className="is-size-4">
<myContext.Consumer>
{(context) => (
<p><strong>Name:</strong> {context.state.name}</p>
)}
</myContext.Consumer>
</h2>
</div>
);
};
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', location: ""};
this.handleName = this.handleName.bind(this);
this.handleLocation = this.handleLocation.bind(this);
}
handleName(event){
this.setState({name: event.target.value});
}
handleLocation(event){
this.setState({location: event.target.value});
}
render(){
return (
<div className="user-form">
{/* Change user's name in context */}
<div className="input-item">
<label className="label">Update Name: </label>
<input value={this.state.name} onChange={this.handleName} className="input" />
</div>
{/* Change user's location in context */}
<div className="input-item">
<label className="label">Update Location: </label>
<input value={this.state.location} onChange={this.handleLocation} className="input" />
</div>
</div>
);
}
};
class App extends React.Component {
render(){
return (
<MyProvider>
<div className="App">
<div className="container">
<Form />
<Name />
<Location />
</div>
<ScotchInfoBar />
</div>
</MyProvider>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);