Notes

import React, { Component } from 'react';
import './App.css';
import './fonts/font-awesome-4.7.0/css/font-awesome.css';
import heart_icon from "./images/icons/icon-heart-01.png";

import axios from 'axios';

class Footer extends Component {

state = {
images_of_payment_cards: [],
};

componentDidMount() {
axios.get('./Images.json').then(res => {
this.setState({images_of_payment_cards: res.data});
})
}

render() {

console.log(this.state.images_of_payment_cards);

const categories = ["women", "men", "shoes", "watches"];
const help_options = ["track Order", "return", "shipping"];
const social_icons = ["fa fa-facebook", "fa fa-instagram", "fa fa-pinterest"];

return (
<footer className="coza-footer">
<section className="coza-footer__section">
<section>
<h1>categories</h1>
<ul>

{
categories.map(categories =>
<li key={categories}>{categories}</li>
)
}
</ul>
</section>
<section>
<h1>help</h1>
<ul>

{
help_options.map(help =>
<li key={help}>{help}</li>
)
}
<li className="text-change">FAQs</li>
</ul>
</section>
<section className="get-in-touch">
<h1>get in touch</h1>
<p>Any questions? Let us know in store at 8th floor, 379 Hudson St, New York, NY 10018 or call us on (+1) 96 716 6879</p>
<div className="get-in-touch__icons">
<pre>
{
social_icons.map(icons =>
<i key={icons} className={icons + " fa-icons"}></i>
)
}
</pre>
</div>
</section>
<section className="coza-newsletter">
<h1>newsletter</h1>
<form className="newsletter__form">
<label htmlFor="email-newsletter">News Letter</label>
<input className="form-field" id="email-newsletter" name="email-newsletter" placeholder="[email protected]" />
<button className="btn coza-newsletter-btn"><span>subscribe</span></button>
</form>
</section>
</section>
<section className="coza-payment-footer-section">

{
this.state.images_of_payment_cards.map(card_name =>
<img key={card_name.image} src={require(`${card_name.image}`)} alt={card_name.alt} />
)
}

<p>Copyright &#169;2019 All rights reserved | This template is made with <span><img src={heart_icon} alt="heart" /></span> by <span className="color-blue">Colorlib</span></p>
</section>
</footer>
);
}
}

export default Footer;