New-Slider.js

/*
  This is an example of what I am reverting it to. 
  
  For full view of the code, visit the repository here https://github.com/DZuz14/react-slider
  
*/

// This is the Main Slider Component now
import React, { Component } from 'react';
import Slide from './Slide';
import RightArrow from './RightArrow';
import LeftArrow from './LeftArrow';
import Dots from './Dots';
require('./style.scss');

/* To Do */
/*
  => Add Dots & Arrow Funtionality
*/

export default class Slider extends Component {
  constructor(props) {
    super(props);

    // User just needs to set the name of each picture in whatever order they would like.
    // This array is passed down to the child Slide as props.
    this.state = {
      background: ['aurora','canyon','martin']
    }
  }

  render() {
    return (
      <div className="slider">
        {/* There are no more individual slides, you only need one Slide Component */}
        <Slide background={this.state.background} current={1} />
      </div>
    );
  }
}





// This is now the child Slide Component
import React, { Component } from 'react';

const Slide = (props) => {
const current = props.background[props.current];
console.log(current);
  const styles = {
    imageBackground: {
      backgroundImage: `url(${current}.jpg)`,
      backgroundSize: 'cover',
      backgroundPosition: 'center center'
    }
  }

  return (
    <div className="slide" style={styles.imageBackground}></div>
  )
}


export default Slide;

Hello Bro,its good but you also write over code in a file no use the export files set your export file in this code