Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the desired outcome.
import React, { Component } from "react";
import "w3-css/w3.css";
export default class Home extends Component {
render() {
return (
<div className="w3-container">
<div className="w3-content w3-display-container">
<img className="mySlides" src={"./1.jpg"} />
<img className="mySlides" src={"./2.jpg"} />
<img className="mySlides" src={"./3.jpg"} />
<div
className="w3-center w3-display-bottommiddle"
style="width:100%"
>
<div className="w3-left" onclick="plusDivs(-1)">
❮
</div>
<div className="w3-right" onclick="plusDivs(1)">
❯
</div>
<span
className="w3-badge demo w3-border"
onclick="currentDiv(1)"
/>
<span
className="w3-badge demo w3-border"
onclick="currentDiv(2)"
/>
<span
className="w3-badge demo w3-border"
onclick="currentDiv(3)"
/>
</div>
</div>
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Challenges faced while following the steps outlined here for creating a slideshow. Errors encountered are also provided along with the link to the image of the error displayed on the local host page.
Error Message Received: The style prop requires a mapping from style properties to values, not just a string.