Render table row and cell elements based on condition in ReactJS map loop

Question

I want to generate 4 column structure from API data, so I implemented the below logic but it's not working.

Basically I want new table cells to display from every data entry of map function, but new table row generate after 4th data entry. Please help to generate and manage dynamic table elements.

 calcs.map(
                        calc =>  {
                            if(calc.order % 4 == 0)
                            {
                                if(calc.order != 1)
                                {
                                    </tr>
                                 }
                                <tr>
                            }
                             
                                <td key={calc.order}>
                                <button className='btn btn-warning' onClick={() => calcClicked(calc.sign)} 
                                            name={calc.order} key={calc.order}>{calc.sign}</button>
                                </td>
                            }
     )

Answer 1

I have solved my problem by installing and using HTMLReactParser which allow me to execute code written in string variable.