Hi
Firstly, apologies if my terms are not correct.
I am learning React and I have created a simple accordion component. This works as it should but I have found an issue trying to make it reusable with arrays that are structured differently.
I have managed to use a hook which allows me to either use my blogs.json file or my stories.json file like so:
<Accordion array={stories}/>
<Accordion array={blogs}/>
Now my issue is, my Accordion component uses .map to gather the information, I have asked it to look for i.e. item.content but the blogs array doesn't have content, the blogs array uses body.
I tried using the following:
<Accordion array={stories} content={stories.content}/>
<Accordion array={blogs} content={stories.body}/>
but that won't work. I was thinking I need to change the following line in the component
<p>{item.content}</p>
to something like:
<p>{content}</p>
Which I can pass some static text and it work fine but nothing from the array.
Here's my component,
import { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import stories from "../data/Stories.json";
const Accordion = ({ array }) => {
const [activeIndex, setActiveIndex] = useState(null);
const ref = useRef();
useEffect(() => {
const onBodyClick = (event) => {
if (ref.current && ref.current.contains(event.target)) {
return;
}
};
document.body.addEventListener("click", onBodyClick);
return () => {
document.body.removeEventListener("click", onBodyClick);
};
}, []);
const handleChange = (index) => {
setActiveIndex(activeIndex === index ? null : index);
};
const renderedItems = array.map((item, index, key) => {
return (
<div key={item.title}>
<div
ref={ref}
className={`${activeIndex === index ? "active" : ""} title`}
onClick={() => handleChange(index)}
>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`${activeIndex === index ? "active" : ""} content`}>
<p>{item.content}</p>
</div>
</div>
);
});
return <div className="ui styled accordion">{renderedItems}</div>;
};
export default Accordion;
How do I overcome this?
Top comments (2)
I believe you're on the right track. Try changing this.
To this.
Don't forget to use
contentinside the component.And now in the accordion component pass a static text with the property name.
If you want to get fancy you can turn the prop
contentinto a function.You could do this.
Thank you. That worked perfectly. I thought I might be close but I just couldn't get over the hurdle. Thanks