As a beginner in React, I am attempting to create an app following a tutorial. In my component, I utilized the figure tag but it's not showing up when inspecting element in Chrome. Here are the code snippets:
The tutorial includes a div tag as a child of the container. However, I can't seem to achieve that.
View the image from the tutorial showcasing the div tag with a figure tag as a child element
Here is my code which only contains a div tag
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Main from './Components/Main'
import './styles/stylesheet.css'
ReactDOM.render(<Main/>, document.getElementById('root'));
ReactDOM.render(, document.getElementById('root'));
Main.js
import React, { Component } from 'react'
import Title from './Title'
import Photowall from './Photowall'
const posts = [{
id: "0",
description: "beautiful landscape",
imageLink: "https://image.jimcdn.com/app/cms/image/transf/none/path/sa6549607c78f5c11/image/i4eeacaa2dbf12d6d/version/1490299332/most-beautiful-landscapes-in-europe-lofoten-european-best-destinations-copyright-iakov-kalinin.jpg" +
"3919321_1443393332_n.jpg"
},
{
id: "1",
description: "Aliens???", imageLink: "https://s3.india.com/wp-content/uploads/2017/12/rocket.jpg"
},
{
id: "2",
description: "On a vacation!",imageLink: "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2017/08/24/104670887-VacationExplainsTHUMBWEB.1910x1000.jpg"
}
class Main extends Component{
render(){
return <div>
<Title title={'Photowall'}/>
<Photowall posts={posts}/>
</div>
}
}
export default Main
Photowall.js
import React,{ Component} from 'react'
import Photo from './Photo'
class Photowall extends Component{
render() {
return
<div className='photo-grid'>
{this.props.posts.map((post,index)=> <Photo key={index} post={post}/>)}
</div>
}
}
export default Photowall
Photo.js
import React, {Component} from "react";
class Photo extends Component{
render(){
const post =this.props.post
return <figure className="figure"></figure>
}
}
export default Photo
Stylesheet.js
html{
font-size: 10px;
}
h1{
font-family: billabong;
text-align: center;
font-size: 13rem;
margin: 2rem 0rem;
font-weight: 400;
letter-spacing: 4px;
color: grey;
}
@font-face {
font-family: billabong;
src: url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff');
}
.photo-grid {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.figure {
flex-basis: calc (33.333%-4rem);
border: 1px solid #d3d3d3;
padding: 2rem;
flex-grow: 1;
margin: 0 2rem;
}