How do I append another field in the ReactJS conditional statement?

March 3, 2022

I would like to append a <br/> tag between the record.customerName and the record.customerGender in the conditional statement but it is giving me the <br/> instead of a real break? How do I append a break between the 2 frields? Thanks

{customeData.map(record =>{
return(<React.Fragment>{record._id == items._id? record.customerName + '<br/>' + record.customerGender:""}</React.Fragment>)
                                        })}

>Solution :

You can’t just throw raw HTML into JSX expressions.

Use JSX properly. Put your string variables in expressions, and generate your elements with JSX tags.

(record) => {
    return (record._id == items._id) ?
        <>
            {record.customerName}
            <br />
            {record.customerGender}
        </> :
        "";
}