I am developing a react application which will use for new employee to create avatar depends on his behavior. App will have login, welcome and create avatar, hobby(user would able to select one hobby) and behavior screen. once user logged in, we will get the data and create new person object.
My problem is I couldn't add new property that avatar in newly created person object. I have given my code below.
contex.js
import React, { Component } from 'react'
const Context = React.createContext()
const reducer = (state, action) => {
switch(action.type){
case 'ADD_CONTACT':
return{
...state,
person: [action.payload, ...state.person]
};
case 'ADD_AVATAR':
return{
...state,
person: [action.payload, ...state.person.avatar]
}
default:
return state;
}
}
export class Provider extends Component{
state = {
person:[
{
id: '',
email: '',
password: '',
avatar: ''
}
],
dispatch: action => {
this.setState(state => reducer(state, action))
}
}
render(){
return(
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
}
export const Consumer = Context.Consumer;
welcome.js
import React, { Component } from 'react'
import {Consumer} from '../Context';
import { Button, Form, FormGroup, Label, Input} from 'reactstrap';
export default class Welcome extends Component {
onSubmit = ( dispatch, e) => {
e.preventDefault();
const newAvatar = {
avatar: 'new'
}
dispatch({ type:'ADD_AVATAR', payload: newAvatar})
}
render() {
return (
<Consumer>
{value => {
const { avatar, email, dispatch } = value;
return(
<div className="container">
<h1>Welcome {value.person[0].email}!</h1>
<div className="row">
<div className="col-md-6">
<Form onSubmit={this.onSubmit.bind(this, avatar, dispatch)}>
<FormGroup check >
<Label check>
<Input type="radio" name="avatar" value='male'/>{' '}
male
</Label>
</FormGroup>
<FormGroup check>
<Label check>
<Input type="radio" name="avatar" value='female'/>{' '}
female
</Label>
</FormGroup>
<Button type="submit">Next</Button>
</Form>
</div>
</div>
</div>
)
}}
</Consumer>
)
}
}
Any help appreciated. Thank you!
Sebastian
I think the problem lies somewhere in your reducer on creating the new Person object in state.
Can you provide JSON's on how the state should look like in different stages of the app?