I am mapping over data which returns an array of elements. In some cases tests.databases returns two database names and I would like to create a new line
2
-
can you show your array structure (unitTestData) and visual formation of your requirement please?Paveloosha– Paveloosha2020-10-08 06:24:36 +00:00Commented Oct 8, 2020 at 6:24
-
Just updated it in my question, thanks!bloom bloom– bloom bloom2020-10-08 06:29:14 +00:00Commented Oct 8, 2020 at 6:29
Add a comment
|
2 Answers
Map the array of database names to include a break element. Or you can wrap each name in its own div with style, whatever you need really.
{props.unitTestsData &&
props.unitTestsData.map((test) => (
<div key={test.id} className="Table UnitTestsGrid">
<div>{test.id}</div>
<div style={{ wordWrap: "break-word" }}>{test.unit_test_name}</div>
<div style={{ wordWrap: "break-word" }}>
{test.databases.map((el) => (
<Fragment key={el}>
{el}
<br />
</Fragment>
))}
</div>
<div>
<Checkbox
mainColor
changeHandler={(e) => updateUnitTestSelection(e, test)}
data={{}}
id={test.id.toString()}
/>
</div>
</div>
))}
1 Comment
bloom bloom
You know me better than I know myself haha. Thanks!
<div style={{wordWrap: 'break-word'}}>{test.unit_test_name}</div>
<div style={{wordWrap: 'break-word'}}>{test.databases}</div>
Use span instead of div
2 Comments
bloom bloom
haha all good, yeah it didn't work without the break word
Piyush Rana
use
style={{display: 'block'}}