how can I iterate through this json file? - json

Question

I want to do my cv in react.
I have a json file that contains all my experience, education and more however I come across a problem when I output the data
{
"experience":[
{
"Title":"Somewhere",
"Date":"2015 - 2015",
"Description":
[
"Participate in the full development lifecycle, following a SCRUM methodology applied to core product",
"Participate in the full development lifecycle, following a SCRUM methodology applied to core product",
"Participate in the full development lifecycle, following a SCRUM methodology applied to core product"
]
},
{
"Title":"Somewhere",
"Date":"2015 - 2015",
"Description":
[
"Participate in the full development lifecycle, following a SCRUM methodology applied to core product",
"Participate in the full development lifecycle, following a SCRUM methodology applied to core product",
"Participate in the full development lifecycle, following a SCRUM methodology applied to core product"
]
}
]
}
I am calling it in experience.js
const Experience = (props) => (
<div className="container">
<p className="subtitle">WORK EXPERIENCE</p>
<hr className="subtitles"/>
<ul className="left-box">
{props.data.map((info,i) =>
<li key={i} className="top">
<div className="year">
<h4>{info.Date}</h4>
<span> {info.Title}</span>
</div>
<div className="box-content" >
<h4 className="sameHeightTitle">Front End Developer</h4>
<ul className="left-box-content">
<li className="sec-layer">
{info.Description}
</li>
</ul>
</div>
</li>
)}
</ul>
</div>
);
the problem is instead of having the description in bullet form I have it all on the same bullet. Basically every string that starts with Participate in my json file should be next to a new bullet.The following is screenshot of the output:
EDIT: Answer
const Experience = (props) => (
<div className="container">
<p className="subtitle">WORK EXPERIENCE</p>
<hr className="subtitles"/>
<ul className="left-box">
{props.data.map((info,i) =>
<li key={i} className="top">
<div className="year">
<span className="sub-sub-title"> {info.Title}</span>
<h4>{info.Date}</h4>
</div>
<div className="box-content" >
<h4 className="sameHeightTitle">Front End Developer</h4>
<ul className="left-box-content">
{info.Description.map((newDesc, o)=>
<li>
{newDesc}
</li>
)}
</ul>
</div>
</li>
)}
</ul>
</div>
);

Answer 1

Your Description is an array. You need to iterate over it. What js library are you using? You'll need to find out how you iterate over a list in that language.
This isn't the syntax for the foreach loop, but you'll get the idea.
foreach(var description in info.Description){
<li className="sec-layer">
{description}
</li>
}