dynamically add table row react hooks

Question

I have a table in which I map some data to it, on + button I want to add new table row and set new defaultState for that table row using react hook

import React, { useState, useEffect } from 'react'
import { useMutation, useQuery } from '@apollo/react-hooks'
import { Link, useParams } from 'react-router-dom'

import './style.css'
import {
  GET_SURVEY,
  CREATE_SURVEY,
} from './queries'
import { pushError } from '../../modules/error'

export default function SurveyDetails() {
  const params = useParams()
  const { data } = useQuery(GET_SURVEY, { variables: { id: params.surveyId } })
  const [survey, setSurvey] = useState({})
  useEffect(() => {
    async function loadSurvey() {
      if (data && data.me.survey) {
        await setSurvey(data.me.survey)
      }
    }
    loadSurvey()
  }, [data])

  const HomePage = () => (
    <Link to="/home">Home</Link>
  )
  const SurveyPage = () => (
    <Link to="/survey">Survey</Link>
  )

  const hadnleAddRow = () => {
    console.log('?????')
    const questionId = (survey.questions || []).map((t) => t.id)
    const newState = {
      id: params.surveyId,
      questions: {
        id: questionId,
        questionText: '',
        type: '',
        options: [],
      }
    }
    // console.log(setSurvey((preSurvey) => [...preSurvey, {}]))
    setSurvey((preSurvey) => [...preSurvey, newState])
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <h2>Survey Details</h2>
        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', flex: '1' }}>
          <span style={{ paddingRight: '25px' }}><SurveyPage /></span>
          <span><HomePage /></span>
        </div>
      </div>
      <table>
        <tr>
          <th>Question Text</th>
          <th>Type</th>
          <th>Options</th>
          <th>Status</th>
          <th>Edit</th>
          <th><button type="submit" onClick={hadnleAddRow}>+</button></th>
          <th>Remove</th>
        </tr>
        {(survey.questions || []).map((q) => (
          <tr key={q.id}>
            <td>{ q.questionText }</td>
            <td>{ q.type }</td>
            <td>
              { q.options.join(', ')}
              {' '}
            </td>
            <td>{ survey.status }</td>
            <td><button type="submit" onClick={openModal}>Edit</button></td>
            <td />
            <td><button type="submit">-</button></td>
          </tr>
        ))}
      </table>
    </div>
  )
}

Right now the error I'm facing is this

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
  81 |     }
  82 |   }
  83 |   // console.log(setSurvey((preSurvey) => [...preSurvey, {}]))
> 84 |   setSurvey((preSurvey) => [...preSurvey, newState])
     | ^  85 | }
  86 | 
  87 | return (

Can someone please explain to me what is happening here, thanks.

Dipesh KC · Accepted Answer · 2020-06-05 09:44:11Z

1

survey is an object having questions as an array(Am i right on this?)

You are returning array with setSurvey.

setSurvey((preSurvey) => {questions:[...preSurvey.questions, newState]})

answered Jun 5, 2020 at 9:44

Dipesh KC

2,4631 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

copser Over a year ago

yup, object whit question as an array, but this will result in another error Expected an assignment or function call and instead saw an expression no-unused-expressions but I see your point here

Dipesh KC Over a year ago

const questionId = (survey.questions || []).map((t) => t.id) . I am confused with what you did here. This is an array and you are assigning this to id. Can you clarify on this?

copser Over a year ago

trying to fetch id which is already there, I've solved it should go setSurvey((preSurvey) => [...preSurvey.questions, newState]) you're hint helped me

Dipesh KC Over a year ago

Glad it was a help for you :)

Collectives™ on Stack Overflow

dynamically add table row react hooks

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related