React/Javascript: Map function

I have tried everything I know about map functions and the syntax but I keep getting TypeError: Cannot read property 'action' of undefined. I think the source of the problem is this line: constructor(data=). Firstly, I have never seen into inside the brackets of constructor other than props constructor(props). So, not sure what is going on there.

TypeError: Cannot read property 'action' of undefined

constructor(data=)

constructor(props)

I am reading a book on React/D3 and the author renders a timeline of dots from a static array of key/value pairs. I am trying render the same graph but my data is coming from a DB. Can someone help me refactor my code below to account for a DB request to grab 'data' before rendering?

Book COde:

constructor(data=)
const times = d3.extent(data.map(d => d.year))
const range = [50, 450]
super(data)
this.state = data, times, range


componentDidMount()
let group
const data, times, range = this.state
const target = this.refs
const scale = d3.time.scale().domain(times).range(range)


My code:

constructor(data=)

const times = d3.extent(data.action.action.map(action => action.timestamp))
const range = [50, 450]
super(data)
this.scale = d3.scaleTime().domain(times).range(range)
this.state = times, range
console.log('state' ,this.data);


render()
const data = this.state
const scale = this
return (
<div className="timeline">
<h1>this.props.name Timeline</h1>
<Canvas>
data.map((d, i) =>
<TimelineDot position=scale(d.year)
txt=`$d.year - $d.event`
/>
)
</Canvas>
</div>
)




My data:

2 Answers
2

It would be data.action.map instead of data.action.action.map

You removed initial empty data property definition in constructor

data

this.state = data, times, range // book
this.state = times, range // your code


Empty data can be mapped w/o error. By removing it's undefined - how it could work?

data

constructor(data=) is just default props initialized with empty data array passed later to base class (by super(data) where is probably set in state? W/o that const data = this.state should be undefined, unable to be used in map. In book code data is directly defined in state - is your code up to date?

constructor(data=)

const data = this.state

data

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.