How to change value from post.map to initial state in react js

Question

i have a homework problem, can i change the value from post.map into value in initial state? because when i want to try edit form, the form wont be change because i use value from post.map and if i use value in initial state the forms is empty if only if you create the form into select and option, but i want to edit by type . how should i do

detailclient.js

this.state = {
      post : [],
      post2 : [],
      post3 : [],
      filteredData: [],
      urlBlacklist : '',
      formData : {
        clientId : '',
        username : 'admPortal',
        clientType : '',
        urlBlacklist : '',
        name : '',
        url : '',
      },
      isUpdate : false,
      isLogedIn,
      currentPage: 1,
      todosPerPage: 5,
      isChecked : false,
      modal : false

    }

detailclient form

<FormGroup>
    <Label htmlFor="url">Url</Label>
    <Input onChange={this.handleForm}
           value={url}
           type="text"
           name="url"
           className="form-control"
           placeholder="Url"
           required="" />
</FormGroup>
<FormGroup>
    <Label htmlFor="urlBlacklist"> Url Blacklist </Label>
    {
        (this.state.post3.map((h, i) =>
            `${h.clientId}` === `${this.state.urlBlacklist}` &&
            <Input
                onChange={this.handleForm}
                key={i}
                value={h.urlBlacklist}
                type="text"
                name="urlBlacklist"
                className="form-control"
                placeholder="URL Black List"
                required=""
            />
        ))
    }
</FormGroup>

handleform

handleForm = (event) => {
    let formDataNew = {...this.state.formData};
    formDataNew[event.target.name] = event.target.value;
    this.setState ({
      formData : formDataNew
    })
  }

i need to change the value from urlBlacklist into initial state . like value in Url . how to change h.urlBlacklist to initialState but the value in h.urlBlacklist move to initialState? thankyou.

score 0 · Answer 1 · answered Oct 02 '19 at 07:45

0

See this answer: React js onClick can't pass value to method

Try to extract code of your post item to Subcomponent and there pass the id to the onChange handler (see the linked example).

answered Oct 02 '19 at 07:45

lavor

1,787
1
14
21

still dont get it bro @.@ – Alexsandro Siregar Oct 02 '19 at 07:58
I thought you have a problem with referencing correct post item in your change handler. Can you post code of handleForm? And what has this code ( `${h.clientId}` === `${this.state.urlBlacklist}`) supposed to do? – lavor Oct 02 '19 at 08:02
sure, i will post it.. ``` ( ${h.clientId} === ${this.state.urlBlacklist})``` this code to display urlblacklist if client id in path /clients similar to client id in path /broadcastt when it similar it will apear in form edit . my question how to edit form when the value input is from post3.map – Alexsandro Siregar Oct 02 '19 at 08:12
As I see it, in your handleForm you are changing the value of `this.state.formData.urlBlacklist` but you are rendering value of `this.state.post3[someItemIdx].urlBlacklist`. So what exactly do you want to achieve (it is hard to understand from your description text)? – lavor Oct 02 '19 at 08:26
yeahh i mean, when we want to display data from another path we should use post.map every we want to display. i use it . but in other case . when we use option we dont need to edit just select it in an option, but in Input case how to edit the value – Alexsandro Siregar Oct 02 '19 at 08:33
So you want to just initialize Input to `this.state.post3[someItemIdx].urlBlacklist` and after first change you want to store and render the value from `this.state.formData.urlBlacklist`? I suggest to extract code to subcomponent as I recommended. You can pass the change handler and 2 values to your subcomponent, the initialValue from your post item and the form value. In subcomponent lifecycle method componentDidMount you will call manually the onChange handler with the default value and in render you will render the form value. – lavor Oct 02 '19 at 08:53
no @.@ ... My simple question is how to edit in urlBlacklist form . jsut it. becuase event target name should smilar with event.target.value butt on this case . my value is h.urlBlackList and name is urlBlacklist how to make h.urlBlacklist to urlBlacklist so i can edit the urlBlacklist section – Alexsandro Siregar Oct 02 '19 at 09:16
Subcomponent will solve also that problem. In Subcomponet you will pass your subcomponent function to the Input onChange and that function will call the this.props.onChange where you will pass your this.handleForm. As you will call this.props.onChange manually in your subcomponent function, you can create and pass the parameters (the `event` in `handleForm`) according to yourself. – lavor Oct 02 '19 at 09:33
bro this is not different class. its in one class . i dont have 2 class . jsut one class – Alexsandro Siregar Oct 02 '19 at 09:47
im really suck at this @.@ please help me . i already tried so many times – Alexsandro Siregar Oct 02 '19 at 09:48
I understand that you have only one component right know. I am suggesting that making another component will solve your problem. – lavor Oct 02 '19 at 10:37

How to change value from post.map to initial state in react js

1 Answers1