-1

This is the code:

import React from 'react';
import {connect} from 'react-redux';
import {vote} from '../store/actions';
import BarChart from "../services/BarChart";
import {color} from '../services/color'


const Poll = ({poll, vote}) => {

    const answers = poll.candidates && poll.candidates.map(candidate => (
        <button onClick={() => vote(poll._id, {answer: candidate.candidate})} key={candidate._id}> {candidate.candidate} </button>
    ));

   const data = {
        labels: poll.candidates.map(candidate => candidate.candidate),
        datasets: [
            {
                label: poll.position,
                backgroundColor: poll.candidates.map(candidate => color()),
                borderColor: '#323643',
                data: poll.candidates.map(candidate => candidate.votes)
            }
        ]
   }
    

        
    return <div>
        <h3>{poll.position}</h3>
        <div>{answers}</div>
        <BarChart chartData={data} />
    </div>
};


export default connect(store => ({
    poll: store.currentPoll
}),{vote},)(Poll);

I'm trying to graph a chart using data maping. I don't know what should be the correct syntax here. Image error link below.

Error:

Browser Error Console Error

Christian
  • 1
  • If the error is that `poll.candidates` doesn't exist, check that the property exists on the object before trying to do stuff with the property – CertainPerformance Jul 12 '22 at 03:40

1 Answers1

0

This means that poll.candidates is not an array. You can add optional chaining to prevent the error such as poll?.candidates?.map(...), but that won't render your information. You need to find why candidates is undefined.

Justin Wallace
  • 86
  • 7
  • 1
    in fact it means that `poll.candidates` is exactly `undefined` - true that's not an array, but the error is quite specific :p – Jaromanda X Jul 12 '22 at 03:39