score:2

Accepted answer

instead of using dangerouslysetinnerhtml you can use the children, as you need is a spread of react.reactchildren. that would be just calling the {children} from props instead of the dangerouslysetinnerhtml

    <div classname="accordion__section">
      <button classname={`accordion ${setactive}`} onclick={toggleaccordion}>
        <p classname="accordion__title">{title}</p>
        <chevron classname={`${setrotate}`} width={10} fill={"#777"} />
      </button>
      <div
        ref={content}
        style={{ maxheight: `${setheight}` }}
        classname="accordion__content"
      >
        {children}
      </div>
    </div>

here is a forked solution of your codesandbox.

also, instead of setting the dom to a variable, as its a conditional scenario, you can use the ternary operator, which helps in better readability.

const listmaker = (item) => {
  return (
    <>
      {item.children.length === 0 ? (
        <accordion title={item.name} />
      ) : (
        <accordion title={item.name}>
          {item.children.map((childitem) => {
            return listmaker(childitem);
          })}
        </accordion>
      )}
    </>
  );
};

score:1

dangerouslysetinnerhtml is to use with strings. you shouldn't give an array of components to it. yet you don't send any prop called content anyway. i think you meant children prop there. just render children instead of using dangerouslysetinnerhtml

in your accordion component replace this:

<div
  classname="accordion__text"
  dangerouslysetinnerhtml={{ __html: props.content }}
/>

with this:

<div classname="accordion__text"> 
  { props.children }
</div>

Related Query

More Query from same tag