score:2
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>
Source: stackoverflow.com
Related Query
- Dynamic nested accordion with nested children
- How to use multiple nested dynamic routes with getStaticPaths?
- ant design table with dynamic children columns
- How to create dynamic router for nested items in a sidebar with multilevel dropdown?
- ReactJS - Dynamic Component Name with closing tag and children elements
- Redux Nested State... with dynamic key
- How to get the last children in a deeply nested array with objects
- ReactJS: How to access and update nested state object with dynamic key?
- Modify state with multiple nested children in React
- Spread Operator with Dynamic Property Keys and nested data?
- How to get nested json with dynamic value
- React: How to get the ref height of an element coming from the children with dynamic height?
- Reactjs - How to access nested keys in a json with dynamic values
- Store data with a dynamic key in a nested object using local storage
- Building a dynamic nested routes architechure with React and React Router
- Children dynamic content with reactjs
- Dynamic Route not being loaded with nested routing
- How to wrap react children with dynamic components or tags
- How to filter Dynamic nested array of JSON objects based on text match with both upper and lower case
- Issue with key assignment to dynamic children in React-Rails app
- Display a Circle with Dynamic Children
- how to map deeply nested objects in table with appropriate columns with rowspans in react.js with dynamic data?
- How to create dynamic nested accordion in React
- How to dynamic map a nested loop in a Table with Conditions in JavaScript?
- Nested React routes with dynamic route tags
- Nested routes with react router v4 / v5
- Reactjs setState() with a dynamic key name?
- How to use children with React Stateless Functional Component in TypeScript?
- PropTypes check of object with dynamic keys
- Using a forwardRef component with children in TypeScript
More Query from same tag
- React async timing issue, cause modal to pop up with prefilled form after state change?
- Component link hover style to use hover
- How to assert that method is called
- React Router (v4) not redirecting in componentDidUpdate()
- React material container header main and footer it is not aligned using flexbox in the header
- Store Values from Material UI's form in TypeScript
- Add custom css for react dropdown tree select all other css mashup
- Add checkboxes dynamically isn't working if called outside onClick
- How do I specify a specific get method using axios?
- Shallow Rendering Jest Snapshots
- issue in dynamic Form List with collapse
- How do I make react router v6 load elements without having to manualy refresh the url?
- What is the best way to call inherited method (through 'props') on ReactJS?
- Is it a good practice creating state in React component without changing it ever?
- Font Awesome is rendering "[object object]" if placed next to a concatenated text
- How to maintain a dynamic height of the pseudo selector ::before?
- React useffect dependency causes infinite requests
- Listen for keypress / keydown event locally in react router component
- Firebase Authentication & React
- React - Slow state setting for dynamic rendered semantic UI dropdown component
- How can I render children inside a component that does not render children?
- How to use .on in react?
- how to access key name as dynamically in ReactJS?
- How do I generate multiple semantic.<theme>.min.css files when building semantic ui?
- Input restrict characters in ant design
- Dealing with state in <form> onSubmit React
- Axios POST request is complaining about cross origin, but curl request works fine
- How to achieve multi line area chart with Ant Design Charts?
- React useState - FaStar icons - Click To Change and Change Back
- Update state with multiple input