React: how print conditionally - reactjs

Question

I need to return conditionally a <Row> or </Row> if an index is 3 or multiple.
{
companyConfiguration.map((item, index) => {
return (
// here
{index%3===0 && <Row>}
<Col>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
// here
{index%3===0 && </Row>}
)
})
}
But I get Unexpected token, expected ","
Edit:
I need to close after third element, and reopen it at fourth.
Examples given doesn't work unfortunately.
Must be a thing similar to
return (
<>
{
(index % 3 == 0) ?
<Row>
<Col>
<p>{index}</p>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
:
<>
<Col>
<p>{index}</p>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
</Row>
</>
}
</>
)

Answer 1

This is not the correct approach. You should wrap all the related components inside your tenary operator, so the correct approach would be
{index % 3 === 0 && (
<Row>
<Col>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
</Row>
)
}
This is not e.g. like java scriptlets where you add a tag or html in general according to a variable's value - so you specify if a start tag and an end tag should be rendered at html page - so {index%3===0 && </Row>} is not correct.

Answer 2

also, you need to add fragments<> //some code</> to your code
{
companyConfiguration.map((item, index) => {
return (
<>
{index % 3 === 0 && (
<Row>
<Col>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
</Row>
)
}
</>
)
})
}

Answer 3

You can use it like this
{
companyConfiguration.map((item, index) => {
return (
<>
{
index%3 === 0 ? <Row>
<Col>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
</Row> : <Col>
<FormComponent
key={index}
field={item}
onChange={handleChange}
currentItem={{}}
/>
</Col>
}
</>
)
})
}