estoy creando un login con context api, desde el componente consumo ciertas funciones que estan contenidas en el provider, si hago la prueba a nivel de componente no me aparece ningun error, no asi cuando cambio estas funciones y las llamo desde el componente a traves de context consumer, me da el siguiente error:
TypeError: action.fetchData is not a function
mi codigo del componente login es el siguiente:
import React, { Fragment } from 'react';
import { Context } from '../../store/TheContext';
export class Login extends React.Component {
render() {
return(
<Fragment>
<Context.Consumer>
{action => {
return(
<form onSubmit={e => action.submitLogin(e)}>
<input type="text" onChange={e => action.fetchData(e)} name="username" placeholder="username"></input>
<input type="password" onChange={e => action.fetchData(e)} name="password" placeholder="password"></input>
<button type="submit">Log in</button>
</form>
)
}}
</Context.Consumer>
</Fragment>
)
}
}
en tanto el del provider en donde tengo contenidas las funciones para el login:
import React from 'react';
export const Context = React.createContext();
export class TheProvider extends React.Component {
// initial obj state, this obj has store and actions (methods)
state = {
// login data:
loginData: {}
}
aprieta(e) {
alert('click');
}
/* LOGIN ACTIONS */
fetchData = (e) => {
const { name, value } = e.target;
const data = { [name]: value };
const newData = { ...this.state.loginData, ...data }
this.setState({
loginData: newData
})
}
submitLogin = (e) => {
e.preventDefault(e);
let url = 'http://127.0.0.1:8000/api/rest-auth/login/';
fetch(url, {
method: 'POST',
body: JSON.stringify(this.state.loginData),
headers: {
'content-type': 'application/json'
}
})
.then(resp => {
console.log(resp.status);
return resp.json();
})
}
render(){
return(
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
}