Is this approach to render the output a bad approach ?

[unexpand]

I was trying to see if this approach works or not and I get the desired output but again this is just a test.
Is this a bad approach if I consider maintainability or browser compatibility ?

import React from 'react'

interface ReadOnlyRTEViewProps {
    content: any;
}

const ReadOnlyRTEView: React.FC<ReadOnlyRTEViewProps> = ({ content }) => {
    return (
        <div className=" p-5 border border-gray-300 prose lg:prose-xl max-w-none text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
            {content.map((node: any, i: number) => (
                <div key={i}>
                    {node.type === 'heading-one' ? (
                        <h1 className="text-2xl font-bold">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </h1>
                    ) : node.type === 'heading-two' ? (
                        <h2 className="text-xl font-bold">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </h2>
                    ) : node.type === 'heading-three' ? (
                        <h3 className="text-xl font-bold">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </h3>
                    ) : node.type === 'heading-four' ? (
                        <h4 className="text-xl font-bold">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </h4>
                    ) : node.type === 'heading-five' ? (
                        <h5 className="text-xl font-bold">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </h5>
                    ) : node.type === 'heading-six' ? (
                        <h6 className="text-xl font-bold">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </h6>
                    ) : node.type === 'paragraph' ? (
                        <p className="mb-10 text-base">
                            {node.children.map((child: any, j: number) => (
                                <span
                                    key={j}
                                    style={{
                                        fontWeight: child.bold ? 'bold' : 'normal',
                                        fontStyle: child.italic ? 'italic' : 'normal',
                                        textDecoration: child.underline ? 'underline' : 'none',
                                        textDecorationLine: child.strikethrough ? 'line-through' : 'none',
                                    }}
                                >
                                    {child.text}
                                </span>
                            ))}
                        </p>
                    ) : node.type === 'code' ? (
                        <pre className="w-10/12 mx-auto bg-gray-800 rounded-md p-4 overflow-x-auto text-gray-200">
                            <code className="text-white text-sm font-mono whitespace-pre-wrap text-left">
                                {node.children.map((child: any, j: number) => {
                                    return child.children.map((grandchild: any, j: number) => {
                                        return (<React.Fragment
                                            key={j}

                                        >
                                            {grandchild.text}
                                            <br />
                                        </React.Fragment >
                                        )
                                    })

                                })}
                            </code>
                        </pre>
                    ) : node.type === 'quote' ? (
                        <pre className="text-white text-sm font-mono p-2 rounded-md my-20">
                            <code >
                                {node.children.map((child: any, j: number) => {
                                    console.log(child, " this is child ");
                                    return child.children.map((grandchild: any, j: number) => {
                                        console.log(grandchild, " this is grandchild ");
                                        return (<React.Fragment
                                            key={j}

                                        >
                                            {grandchild.text}
                                            <br />
                                        </React.Fragment >
                                        )
                                    })

                                })}
                            </code>
                        </pre>
                    ) : node.type === 'image' ? (
                        <div className='flex justify-center'>
                            <img src={node.url} alt="Post Image" className="mb-4" />
                        </div>

                    ) : node.type === "numbered-list" ? (
                        <ol >
                            {node.children.map((child: any, j: number) => {
                                if (child.type === 'list-item') {
                                    return (
                                        <li key={j} className='list-item ml-4 font-normal text-base'>
                                            {child.children.map((grandchild: any, j1: number) => {
                                                return (<React.Fragment key={j1}>{grandchild.text}</React.Fragment>
                                                )
                                            })}
                                        </li>
                                    )
                                }

                            })}
                        </ol>
                    ) : node.type === 'bulleted-list' ? (
                        <ul >
                            {node.children.map((child: any, j: number) => {
                                if (child.type === 'list-item') {
                                    return (
                                        <li key={j} className='list-item ml-4 font-normal text-base'>
                                            {child.children.map((grandchild: any, j1: number) => {
                                                return (<React.Fragment key={j1}>{grandchild.text}</React.Fragment>
                                                )
                                            })}
                                        </li>
                                    )
                                }

                            })}
                        </ul>
                    ) : null}
                </div>
            ))}
        </div>

    )
}

export default ReadOnlyRTEView

[agammann]

Rendering Slate JSON as React elements is a reasonable serialization approach. The maintenance issue in your example is that the leaf renderer is repeated in each heading/paragraph, while list items only output grandchild.text, losing their marks. Extract one leaf renderer and use it everywhere:

function StyledLeaf({ leaf }) {
  const decoration = [
    leaf.underline && 'underline',
    leaf.strikethrough && 'line-through',
  ].filter(Boolean).join(' ') || 'none';
  return <span style={{
    fontWeight: leaf.bold ? 'bold' : 'normal',
    fontStyle: leaf.italic ? 'italic' : 'normal',
    textDecoration: decoration,
  }}>{leaf.text}</span>;
}

This also represents underline and strikethrough together through one property, rather than setting both textDecoration and textDecorationLine separately. For nested content, recurse through element children until you reach text leaves; hard-coding two levels will not cover deeper lists or inline elements. Slate's serialization guide demonstrates that traversal.

React renders {leaf.text} as text, so you do not need to create raw HTML strings for these leaves. I tested the exact helper with React 18.2.0 server rendering for combined marks and escaping </& text. That checks the serialization output, not a browser compatibility matrix. Keep schema validation and any image/link URL policy at your content boundary.