brianfr82 brianfr82 - 4 months ago 7
Javascript Question

React Select label not showing

I'm using the React Select Library and when I pick a label in the select field, the value shows instead of the label. When I click the dropdown, the labels show, but when I select a label, the value shows instead of the label.

I'm building my field here:

payment_code: {
label: "Payment Code", value: 'payment_code', choices: paymentCodes.map((payment_code) => {

displayChoices.payment_code[payment_code['id']] = payment_code['name'];
console.log(displayChoices.payment_code);
return {
label: payment_code['name'], value: payment_code['id']
}
}), type: 'choice'
},


The other fields work correctly but this one does not. I'm not a front end developer so I'm pretty stumped with this. I'd add the JSX but like I said, it's working correctly for the other fields.

Answer

Not sure why, but

return {
    label: payment_code['name'], value: payment_code['id']
}

should've been

return {
    label: payment_code['name'], value: payment_code['id'].toString()
}

For some reason, the value needs to be a string.

Comments