Dandy Dandy - 2 months ago 9
React JSX Question

getInitialState() replacing existing state. How to pass existing state in React?

I'm making some buttons that will show a certain class depending on the status from the database.

I've passed my API results through an emitter and into my state using the below:

constructor(props) {
super(props);
this.state = {
tickets: [],
user: []
};
this.onGetAllTickets = this.onGetAllTickets.bind(this);
this.onGetCurrentUser = this.onGetCurrentUser.bind(this);
}


However, I'm having to set a new state in my button using the
getInitialState()
option. My button looks like this:

const AssignButton = React.createClass({
getInitialState() {
return {
isPressed: false,
completeStatus: "Assign"
};
},
handleClick() {
this.setState({
isPressed: true,
completeStatus: "Assigned",
});
},
render () {
var assignClass = 'ui orange right floated button assign';

//THIS IS WHERE I AM TRYING TO CHECK TICKET STATUS
if(this.state.tickets.status === 2) assignClass = 'ui green right floated button done disabled';
else if(this.state.isPressed) assignClass += ' disabled';
return <button className={assignClass} onClick={this.handleClick}>{this.state.completeStatus}</button>;
}
});


However, passing the
this.state.tickets.status
results in the following:

TicketeesBoard.js:123 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined(…)


I'm assuming this is because my state is overwritten by the
getInitialState()
method.

The
this.state.tickets.status
etc. works outside of this
AssignButton
component.

How do I pass my tickets from the original state into the
getInitialState()
method?

Answer

The problem is that you're trying to access the state of a different component. Your'e addressing this.state.tickets.status where ticket state is not declared in AssignButton

You've got two components. TicketBoard & AssignButton. Your setting the tickets state in TicketBoard and you're trying to access it in AssignButton

Try passing down the tickets state to the assignButton via props and the change your conditions from this.state.tickets.status to this.props.tickets.status. In addition, make sure that you won't have problems with .status being called on an empty array...

Comments