Popular posts

Sebastian Thank you for your response. Here I am providing the JSON on different stages.

Once user logged in

global state

person{
id: uuid();
email: user@[baouici@gmail.com;
password: userpassword;
}

Second stage is gender selection. Once user selected gender the state will be like

person{
id: uuid();
email: user@[baouici@gmail.com;
password: userpassword;
avatar: userselectedgender
}

third stage is hobbies this will be like

person{
id: uuid();
email: user@[baouici@gmail.com;
password: userpassword;
avatar: userselectedgender;
hobby: ['hobby1', 'hobby2', 'hobby3']
}

Like this, and finally we will create a avatar with user selected input. we will use specific images and icons according the state.

ok, then you have to fix your initial state. It sets an array to person instead of an object.

secondly you have to change your reducer accordingly like e.g.

return {...state, person: {...state.person, ...action.payload}}

this is merging the existing person object with some partial data like hobbies or avatar (has to be in the payload property as object as well, like you're already doing)

Sebastian It works.. Thank you so much..

Sebastian How do I store multiple values in a array which will get from hobbies multiple checkbox?

I'm not 100% sure what you mean. Can you Provide some before/after JSON? It makes it a lot easier :)

Sure. I have multiple checkbox in one of my screen which enable user to select hobbies. My question is, How do I get the multiple values which user selected and store in a hobbies array

My hobby component will looks like

import React, { Component } from 'react'
import {Consumer} from '../Context';

import { Button, Form, FormGroup, Label, Input} from 'reactstrap';

class Hobby extends Component {
  constructor(props){
    super(props)
    this.state = {
      checked: false,
    }
  }
  toggle(event) {
    this.setState({
      checked: !this.state.checked
    });
  }

  onSubmit = (dispatch, e) =>{
    e.preventDefault();

    const checkedValue = e.target.type === 'checkbox' ? e.target.checked : e.target.name;
    console.log(checkedValue)

    const newHobbies =  {
      hobbies: [checkedValue] 
     } 

    dispatch({ type:'ADD_HOBBIES', payload: newHobbies})

}

  render() {
    return (
      <Consumer>
        {value =>{
          const { dispatch } = value; 
           return(
              <div>
              <h4>Your Hobbies</h4>
              <Form onSubmit={this.onSubmit.bind(this, dispatch)}>
                  <FormGroup check>
                    <Label check>
                      <Input type="checkbox" name="dancing"   checked={this.state.checked} onChange={this.toggle.bind(this)} />
                      Dancing
                    </Label>
                  </FormGroup>
                  <FormGroup check>
                    <Label check>
                      <Input type="checkbox"  name="foosball" checked={this.state.checked}  onChange={this.toggle.bind(this)} />
                      Foosball
                    </Label>
                  </FormGroup>
                  <FormGroup check>
                    <Label check>
                      <Input type="checkbox" name="music"  checked={this.state.checked}  onChange={this.toggle.bind(this)} />
                      Music
                    </Label>
                  </FormGroup>
                  <Button type="submit">Submit</Button>
              </Form>
              </div>
           )
        }}
      </Consumer>
    )
  }
}

export default  Hobby;

You have one checked field in the local state but 3 checkboxes. That won't work. When you mix component state and redux state within the component then it's important to have a clear line what to put where and don't store any information twice.

Since you store the checked hobbies in the redux state you can leave out the local state completely.

I would this evening provide you with an example component which do 3 checkboxes and redux well.

Sebastian Thank you so much. And noted what you mentioned. I am a beginner in react, just started to code and your support would be very helpful. Really excited to see that.

I have created an example based on your code.

codesandbox.io/s/54pnn461mp

the checkboxes tickle a state change which add or remove items on/from an array.

I have to admit that it's first time using the context api. It leverages some pattern from redux (which I know very well) and it feels a bit odd and clunky. I'm not sold to the Context API yet.

And when you're a beginner on react I would recommend to try to accomplish your task without Context API and redux. That way you get a better understanding how the data flows and the Context API distorts the way react works.

Sebastian Thank you so much. This is what I really want.

Is it possible to do this task without using context API or redux?

Of course. May create a sample application yourself in codesandbox and I can show you how it would look like with pure react

Sure. I will do that.

Sebastian As you said, I have created a sample application in codesandbox. Can you please help me to accomplish my task ?

Please check the link codesandbox.io/s/q4qymj9z76

actually you did this yourself :) good job.

I forked it anyway and did some little structuring but basically you did it with pure react yourself.

codesandbox.io/s/7ml4qxm3v0

just a small hint: you can always declare the state like you and I did outside of the constructer unless the state depends on props (which should only happen rarely). otherweise you can omit the constructor completely if it does nothing serious.

if the application grows and you may have to handle more data then I would bring in redux more sooner than later (because restructuring a more grown app (and they grow always) is more costly)

happy coding

Sebastian Thank you!. Actually I was not able to do that myself but you have motivated me with your help and support and I am really thankful to you.

I have noticed the points you mentioned.

I hope I will have your support now and later as well.

Sebastian I have done a demo version of my application which I discussed with you before. I have some issues to select and un select hobbies and also I want to show images in final screen according the hobbies user selected. Can you please have a look into this. If you can give an idea it would be great.

codesandbox.io/s/github/sonusasankan/nb-avatar

took some time to recover the problem :D

you forgot the break statements within the case leaf methods.

Sebastian, solved. Thank you!

And one more thing, Is it possible to change image src according the hobbies?