Basic component creation in Javascript. Step 1 and also looping over the array to get the information I need to create the component is confusing to me. Any help appreciated thank you.

The array with containing objects is at the top, followed by the steps I need to follow.

const data = [

{

title: 'Lambda School Students: "We\'re the best!"',

date: 'Nov 5th, 2018',

firstParagraph: `Lucas ipsum dolor sit amet ben twi'lek padm darth darth darth moff hutt organa twi'lek. Ben amidala secura skywalker lando,

secondParagraph: `Grievous fett calamari anakin skywalker hutt.Alderaan darth kenobi darth r2- d2,

thirdParagraph: `Dagobah hutt jawa leia calamari ventress skywalker yoda. Binks wicket hutt coruscant sidious

},

{

title: 'Javascript and You, ES6',

date: 'May 7th, 2019',

firstParagraph: `Alohamora wand elf parchment, Wingardium Leviosa hippogriff, house dementors betrayal. Holly, Snape centaur portkey ghost,

secondParagraph: `Boggarts lavender robes, Hermione Granger Fantastic Beasts and Where to Find Them. Bee in your bonnet Hand of Glory elder,

thirdParagraph: `Toad-like smile Flourish and Blotts he knew Id come back Quidditch World Cup. Fat Lady baubles banana fritters fairy lights

},

{

title: 'React vs Angular vs Vue',

date: 'June 7th, 2019',

firstParagraph: `Bulbasaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ivysaur Lorem ipsum dolor sit amet, consectetur adipiscing,

secondParagraph: `Pidgey Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pidgeotto Lorem ipsum dolor sit amet, consectetur adipiscing,

thirdParagraph: `Gotta catch 'em all Horsea gym Ninjask Absol Sinnoh Poliwag. Gotta catch 'em all Youngster wants to fight Soda Pop Floatzel

},

{

title: 'Professional Software Development in 2019',

date: 'Jan 1st, 2019',

firstParagraph: `Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor... Hodor hodor hodor; hodor hodor. Hodor hodor hodor, hodor, hodor

secondParagraph: `Hodor, hodor. Hodor. Hodor, hodor, hodor. Hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; ,

thirdParagraph: `Hodor hodor - hodor... Hodor hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor hodor hodor hodor hodor; hodor hodor? Hodor!

}

];

/* Step 1: Create a function that creates a component. You will want your component to look like the template below:

< div class="article" >

< h2 >{title of the article}< /h2 >

< p class="date" >{date of the article}< /p >

{three separate paragraph elements}

< span class='expandButton' >< /span >

< /div >

Hint: You will need to use createElement more than once here!

Your function should take either an object as it's one argument, or 5 separate arguments mapping to each piece of the data object above.

Step 2: Add an event listener to the expandButton span. This event listener should toggle the class 'article-open' on the 'article' div.

Step 3: return the entire component.

Step 4: Map over the data, creating a component for each oject and add each component to the DOM as children of the 'articles' div.