How to use state in this functional component?

Question

I want to use this state in this code but I got this error: 'state' is not defined how can I use that? I know that I can use class component but it give me an error for using let settings too. and I know that I could use useState but I don't know how can I do that?

function ProductSlider () {

  state= {
    items: [
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'}
    ]
  }

  let settings={
    infinite: false,
    speed: 1000,
    arrows: true,
    slidesToShow: 5,
    slidesToScroll:4,
    responsive: [
      {
        breakpoint: 960,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 2,
        },
      },
    ],

  }

  

  return (
    
    <div>
    <h6 className="text-muted">freinds suggestions</h6>
      {this.state.items.length===0 ? (
        <div className="spinner-border" role="status">
          <span className="sr-only">Loading...</span>
        </div>
      ):(
        <Slider {...settings}>
        {this.state.items.map(item =>(
          <div className="out" key={item.id}>
            <div className="card">
              <img alt={'users here'} src={item.image} height={65} width={65}/>
              <div className="card-body">
                <h5 className="card-title">{item.productName}</h5>
                <small className="card-text text-sm-center text-muted">{item.oldPrice}</small>
                <small className="card-text text-sm-center">{item.price}</small>
              </div>
            </div>
          </div>
        ))}
      </Slider>
      )}
    </div>
    
  )
}


export default ProductSlider;

Answer 1

import React, {useState} from "react";
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import "./style.css";

export default function ProductSlider {
  const [items, setItems] = useState([
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'}
    ])


  let settings={
    infinite: false,
    speed: 1000,
    arrows: true,
    slidesToShow: 5,
    slidesToScroll:4,
    responsive: [
      {
        breakpoint: 960,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 2,
        },
      },
    ],

  }

  

  return (
    
    <div>
    <h6 className="text-muted">freinds suggestions</h6>
      {items.length===0 ? (
        <div className="spinner-border" role="status">
          <span className="sr-only">Loading...</span>
        </div>
      ):(
        <Slider {...settings}>
        {items.map(item =>(
          <div className="out" key={item.id}>
            <div className="card">
              <img alt={'users here'} src={item.image} height={65} width={65}/>
              <div className="card-body">
                <h5 className="card-title">{item.productName}</h5>
                <small className="card-text text-sm-center text-muted">{item.oldPrice}</small>
                <small className="card-text text-sm-center">{item.price}</small>
              </div>
            </div>
          </div>
        ))}
      </Slider>
      )}
    </div>
    
  )
}

To display the images:

Navigate to the "public" folder (root of your project), create an "images" folder (or whatever) and put your images inside.

Then, change the line:

<img alt={'users here'} src={item.image} height={65} width={65}/>

by:

<img alt={'users here'} src={process.env.PUBLIC_URL/images(or whatever)/ + item.image} height={65} width={65}/>