Could somebody please explain how passing functions to child components in ReacJS works?

JavaScript
1

For some context, Im creating a color picker component. My app component has a function that deals with the click of one of the sample colors in the color picker component. Within the color picker component is an array of available colors which is mapped to buttons.

I keep receiving the error “TypeError: Cannot read property ‘props’ of undefined” which is created by my button code below.

export default class ColorPicker extends React.Component {
	constructor(props) {
		super(props);


		const colors = [
			'black',
			'hot-pink'
		]

		const buttons = colors.map(function(value, key) {
			return (
				<button key={key} className={ 'btn btn-light btn-color svg-' + value } onClick={ this.props.colorClick('svg-' + value) }></button>
			);
		});

		this.state = {
			'colors' : colors,
			'buttons' : buttons
		};
	}

	render() {
		return (
			<div>
				{ this.state.buttons }
			</div>
		);
	}
}

The parent component just runs

<ColorPicker colorChange={ this.colorChange.bind(this) }/>

Do I need to bind the function somewhere and if so where? Remember the function is being passed down as a property of the component.

3

Edited, sorry about that

5

I fixed the error, it turns out it was because of the way I used map.

I did

array.map(function(value, key) {

});

The way I should have done it was.

array.map((value, key) => {

});

I figured this out by console logging this.props in the map and outside it of course it only worked outside because () => {} changes the way this is interpreted.