React State Fields with Array of Objects

Question

I am having trouble getting this working with my React state. The set up below works and I can access the data I need, however I am looking to expand the 'questions' field so that it is an array of objects opposed to a single object.

this.state = { 
     ballots: [
        { 
        id: '2222' ,
        title: 'Test Ballot',
        questions: {title: 'Question 1', option: 'option 1' }
        }
    ]
    }

looking to have the state be like this.

this.state = { 
         ballots: [
            { 
            id: '2222' ,
            title: 'Test Ballot',
            questions: [{title: 'Question 1', options: ['option 1', 'option 2', 'option 3'] }, {title: 'Question 2', option: ['option 1', 'option 2', 'option 3']}]
            }
        ]
        }

I am mapping these value to another component as shown below.

return (
            <div className='ballot-page'>
                {this.state.ballots.map(
                    ({id, ...props}) => (
                        <BallotForm key={id} {...props} />
                    )
                )}
            </div>
        );

Would I need to map all the 'ballots' and then map again over each of the 'questions' to get all of the fields within it? Let me know if I can clarify this any better. Below is the BallotForm component.

const BallotForm = ({ title, questions }) => (
    <div className='ballot-form-page'>
        <div className='ballot-form'>
            <div className='ballot-title'>{title}</div>
            <span>{questions.title}</span>
            <form>
                <span>{questions.option}</span>
                <input type='checkbox'></input>
            </form>
        </div>
    </div>
);

RIYAJ KHAN · Accepted Answer · 2020-11-20 03:43:12Z

1

Would I need to map all the 'ballots' and then map again over each of the 'questions' to get all of the fields within it?

yes, you have to map again over each of the 'questions' to get all of the fields within it

const BallotForm = ({ title, questions }) => (
      <div className='ballot-form-page'>
        <div className='ballot-form'>
          <div className='ballot-title'>{title}</div>
          {
            questions.map((singleQue) => {
              return (<>
                <span>{singleQue.title}</span>
                <form>
                  <span>{singleQue.option.join('')}</span>
                  <input type='checkbox'></input>
                </form>
              </>)
            })
          }
        </div>
      </div>
    );

answered Nov 20, 2020 at 3:43

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

1 Comment

Mdurocher Over a year ago

so that solves getting multiple ballots and showing all the options as one long option with a single checkbox, how would I go about mapping through the options and putting them in their own <span> with individual check boxes? Seems like I should break this into individual components I am going to get into gross nested maps if that's even possible.

Collectives™ on Stack Overflow

React State Fields with Array of Objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related