0
151
Viewsrender nested object after combining in react?
i want to render below JSON to the image shown
let finalSplit = [
{
start: "73",
end: "76",
splits: [
{
word: "Now",
start: "73",
color:"#FF6262",
name:"extra",
end: "76",
},
],
},
{
start: "27",
end: "72",
splits: [
{
word: "GitHub Actions",
start: "31",
name:"sub1",
color:"#DFF652",
end: "45",
},
{
word: "the GitHub Actions “New Workflow” experience.",
start: "27",
name:"main",
color:"#62FF8E",
end: "72",
},
{
word: "GitHub",
start: "31",
name:"sub2",
color:"#9483FF",
end: "37",
},
],
},
];
i tried to loop each array and render but since it format it have duplicate not able to render aggregated version
const Mark = () => {
return (
<>
{
finalSplit.map((i)=>{
return (
<div>
i.split.map((j)=>{
<div>{j.text}</div>
})
</div>
)
})
}
<>
);
}
need to some how generate other structure text : "announcing improvements to the GitHub Actions “New Workflow” experience. Now, when you want to create" and each place we get offsets also
·
Juan Pablo Isaza
1 answers
Answer question0
This one works to some extent with sorting and absolute positioning. If you had actual position values in pixels it will work as the image you have given.
const Mark = () => {
const sortData = (data) => {
return data.sort((a, b) => {
if (a.start === b.start) {
return b.end - a.end;
} else {
return a.start - b.start;
}
});
};
const sortNestedData = (data) => {
const unsortedData = data.map((item) => {
if (item?.splits) {
return { ...item, splits: sortNestedData(item.splits) };
}
return item;
});
return sortData(unsortedData);
};
const renderNestedData = (data) => {
const myData = data.map((item) => {
return (
<div
style={{
backgroundColor: item.color,
position: "absolute",
left: `${item.start}px`,
// width: `${item.end - item.start}px`,
top: "0px"
}}
>
{item.word}
{item.splits && renderNestedData(item.splits)}
</div>
);
});
return myData;
};
return (
<div
style={{
backgroundColor: "lightblue",
display: "flex",
flexDirection: "row",
position: "absolute"
}}
>
{renderNestedData(sortNestedData(finalSplit))}
</div>
);
};
export default Mark;
Code sandbox => https://codesandbox.io/s/festive-violet-cc8s7?file=/src/App.js
·
Juan Pablo Isaza
Report
Answer question