0

I try to remove object in array, and my task is to send the list without id, becuse in array of list has id, i want to remove that id, so in list just answer and question : {}. why i put id because i follow intruction from other guy to create random id to make add list success. see code below in handleadd

initialState:

this.state = {
            post : props.post,
            post2 : props.post2,
            list : [],
            object : {
              answer : '',
              id : '',
              question : {
                question : ''
              }
            },

handleAdd and handleForm:

handleTextBox = ({target : { name, value, id }}) => {

      const newList = this.state.list.map(obj => {
        if (obj.id === id) return {...obj, [name] : value , question : { [name] : value }}
        return obj
      })
      this.setState({
        list : newList
      })
    }

    handleAdd = e => {
      this.setState({
        list : [
          ...this.state.list,
          {
            ...this.state.object,
            id : shortid.generate(),
          }
        ]
      })
    }

component:

if (questionId === "Create Own Question") {                            
            return  <Fragment>
              {
                 this.state.list.map(h => (
                    <Fragment>
                    <Col span={24} className="form-password">
                    <AtiField name="question" >
                    <AtiTextbox
                        id ={h.id}
                        name="question"
                        type ="text"
                        placeholder="Question" 
                        size="sm"
                        value = {h.question.question}
                        className={`pocketbank-form form-control ${this.state.formError.question ?  'is-invalid'  : '' }`}
                        label={<FormattedMessage id="label.form.question" />}                  
                        events={{
                          onChange  : this.handleTextBox
                        }}
                  />
                    {formError.question}
                    </AtiField>
                  </Col>
                  <Col span={24} className="form-password">
                    <AtiField name="answer" >
                    <AtiTextbox 
                          id = {h.id}
                          name = "answer"
                          type = "text"
                          placeholder = "Security Answer"
                          size = "sm"
                          value = {h.answer}  
                          className = {`pocketbank-form form-control ${this.state.formError.securityAnswer ?  'is-invalid'  : '' }`}
                          label={<FormattedMessage id="label.form.answer" />}
                          events={{
                            onChange  : this.handleTextBox
                          }} />
                    </AtiField>
                    {formError.securityAnswer}
                  </Col> 
                    </Fragment>
                 ))
              }
              <Col span={24} className="form-password">
              <AtiField name="paramKey" >
                <AtiButton
                  text="+"      
                  type="primary"
                  outline={true}
                  block={false}                           
                  events={{ onClick: (event) => this.handleAdd(event)  }}
                />
              </AtiField>                                                        
              </Col>
                </Fragment>



      }

I expect i can remove an object especially id

  • 1. Find Index: https://stackoverflow.com/questions/10557486/in-an-array-of-objects-fastest-way-to-find-the-index-of-an-object-whose-attribu 2. Create copy of the object using spread operator 3. use splice to delete the object at that index (in the variable where you are storing the copy): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map 4. Pass that variable. – Alwaysblue Nov 04 '19 at 12:31
  • I will try to go through your code if no one answers in couple of hours, but till then from the heading and by vaguely going through your question, you can try the above approach – Alwaysblue Nov 04 '19 at 12:32
  • i sitll try it bro – Alexsandro Siregar Nov 04 '19 at 16:57
  • im still thinking, i put data in list : [] , the list data have question as object, answer in string, and id. so the list will be ```list : [{quetion : { question : 'e.g Where you meet your cat ?" } answer : 'garden" id : (from shortid.generate()) .``` and my question how to remove id after finish fill all the data? and want to submit the data without id , just question and answer. thankyou – Alexsandro Siregar Nov 04 '19 at 17:04

0 Answers0