How to convert a React class-based component into a functional component?

Question

Here is my code for a React "class" based component for a carousel slider that I want to convert into a functional component, but I don't understand how.

import React from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";

export default class extends React.Component {
  render() {
    return (
      <div>
        <h1 className="blog_heading">Testimonials</h1>
        <div className="testimonial">
          <div
            id="carouselExampleSlidesOnly"
            className="carousel slide"
            data-ride="carousel"
          >
            <div className="carousel-inner container">
              <div className="carousel-item active">
                <div className="testimonial_content">
                  <a href={web}>
                    <img
                      src={web}
                      alt="img"
                      className="rounded-circle img-fluid "
                    />
                  </a>
                  <h1>Nisha Sinha</h1>

                  <p>
                    <sup>
                      <i
                        className="fa fa-quote-left mr-2"
                        style={{ fontSize: "14px", color: "#ffca08" }}
                        aria-hidden="true"
                      ></i>
                    </sup>
                    <ReactReadMoreReadLess
                      charLimit={200}
                      readMoreText={"Read more ▼"}
                      readLessText={"Read less ▲"}
                      readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                    >
                      It's a big thanks for helping me a lot in achieving my
                      goal of JRF. All the lectues were so helpful and i really
                      learned from basic to the top and my doubts got cleared
                      whenever needed and really all the faculties helped with
                      quality videos ”
                    </ReactReadMoreReadLess>
                  </p>
                </div>
              </div>
              <div className="carousel-item">
                <div className="testimonial_content">
                  <a href={web1}>
                    <img
                      src={web1}
                      alt="img"
                      className="rounded-circle img-fluid "
                    />
                  </a>
                  <h1 className="my-2">Pooja Dhayal</h1>

                  <p>
                    <sup>
                      <i
                        className="fa fa-quote-left mr-2"
                        style={{ fontSize: "14px", color: "#ffca08" }}
                        aria-hidden="true"
                      ></i>
                    </sup>
                    <ReactReadMoreReadLess
                      charLimit={200}
                      readMoreText={"Read more ▼"}
                      readLessText={"Read less ▲"}
                      readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                    >
                      Dive to learn helped me to achieve my goals.I cleared UGC
                      NET exam in December ”
                    </ReactReadMoreReadLess>
                  </p>
                </div>
              </div>
              <div className="carousel-item">
                <div className="testimonial_content">
                  <a href={web2}>
                    <img
                      src={web2}
                      alt="img"
                      className="rounded-circle img-fluid "
                    />
                  </a>
                  <h1 className="my-2">Parul</h1>

                  <p>
                    <sup>
                      <i
                        className="fa fa-quote-left mr-2"
                        style={{ fontSize: "14px", color: "#ffca08" }}
                        aria-hidden="true"
                      ></i>
                    </sup>
                    <ReactReadMoreReadLess
                      charLimit={200}
                      readMoreText={"Read more ▼"}
                      readLessText={"Read less ▲"}
                      readMoreStyle={{ color: "#00ba74", fontSize: "16px" }}
                    >
                      Hurreh!!!Finally, i got my JRF.Thank u so much Dive to
                      learn faculties.your video 
                      ”
                    </ReactReadMoreReadLess>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

A functional component is just a function that returns some jsx so the basic format of the function should look like this:

const Name = (props) => {
 return (
   <div>Your jsx</div>
)
}

I changed yours to a function real quick, not sure if this is all you needed? Were you having errors with the web componenets when you changed them?

 import React from "react"; import web from "../../image/nisha.jpg"; import web1 from "../../image/Pooja.jpg"; import web2 from "../../image/6547.jpg"; import "../../styles.scss"; import ReactReadMoreReadLess from "react-read-more-read-less"; const newComp = props => { return ( <div> <h1 className="blog_heading">Testimonials</h1> <div className="testimonial"> <div id="carouselExampleSlidesOnly" className="carousel slide" data-ride="carousel" > <div className="carousel-inner container"> <div className="carousel-item active"> <div className="testimonial_content"> <a href={web}> <img src={web} alt="img" className="rounded-circle img-fluid " /> </a> <h1>Nisha Sinha</h1> <p> <sup> <i className="fa fa-quote-left mr-2" style={{ fontSize: "14px", color: "#ffca08" }} aria-hidden="true" ></i> </sup> <ReactReadMoreReadLess charLimit={200} readMoreText={"Read more ▼"} readLessText={"Read less ▲"} readMoreStyle={{ color: "#00ba74", fontSize: "15px" }} > It's a big thanks for helping me a lot in achieving my goal of JRF. All the lectues were so helpful and i really learned from basic to the top and my doubts got cleared whenever needed and really all the faculties helped with quality videos ” </ReactReadMoreReadLess> </p> </div> </div> <div className="carousel-item"> <div className="testimonial_content"> <a href={web1}> <img src={web1} alt="img" className="rounded-circle img-fluid " /> </a> <h1 className="my-2">Pooja Dhayal</h1> <p> <sup> <i className="fa fa-quote-left mr-2" style={{ fontSize: "14px", color: "#ffca08" }} aria-hidden="true" ></i> </sup> <ReactReadMoreReadLess charLimit={200} readMoreText={"Read more ▼"} readLessText={"Read less ▲"} readMoreStyle={{ color: "#00ba74", fontSize: "15px" }} > Dive to learn helped me to achieve my goals.I cleared UGC NET exam in December ” </ReactReadMoreReadLess> </p> </div> </div> <div className="carousel-item"> <div className="testimonial_content"> <a href={web2}> <img src={web2} alt="img" className="rounded-circle img-fluid " /> </a> <h1 className="my-2">Parul</h1> <p> <sup> <i className="fa fa-quote-left mr-2" style={{ fontSize: "14px", color: "#ffca08" }} aria-hidden="true" ></i> </sup> <ReactReadMoreReadLess charLimit={200} readMoreText={"Read more ▼"} readLessText={"Read less ▲"} readMoreStyle={{ color: "#00ba74", fontSize: "16px" }} > Hurreh,..Finally; i got my JRF.Thank u so much Dive to learn faculties.your video ” </ReactReadMoreReadLess> </p> </div> </div> </div> </div> </div> </div> ); } export default newComp

 <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>

Answer 2

Solution

For your current implementation, only bullet point #1 of the explanation applies (see below). Therefore, the functional component should look like this:

import React from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";

export default () => {
  return (
    <div>
      <h1 className="blog_heading">Testimonials</h1>
      <div className="testimonial">
        <div
          id="carouselExampleSlidesOnly"
          className="carousel slide"
          data-ride="carousel"
        >
          <div className="carousel-inner container">
            <div className="carousel-item active">
              <div className="testimonial_content">
                <a href={web}>
                  <img
                    src={web}
                    alt="img"
                    className="rounded-circle img-fluid "
                  />
                </a>
                <h1>Nisha Sinha</h1>

                <p>
                  <sup>
                    <i
                      className="fa fa-quote-left mr-2"
                      style={{ fontSize: "14px", color: "#ffca08" }}
                      aria-hidden="true"
                    ></i>
                  </sup>
                  <ReactReadMoreReadLess
                    charLimit={200}
                    readMoreText={"Read more ▼"}
                    readLessText={"Read less ▲"}
                    readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                  >
                    It's a big thanks for helping me a lot in achieving my
                    goal of JRF. All the lectues were so helpful and i really
                    learned from basic to the top and my doubts got cleared
                    whenever needed and really all the faculties helped with
                    quality videos ”
                  </ReactReadMoreReadLess>
                </p>
              </div>
            </div>
            <div className="carousel-item">
              <div className="testimonial_content">
                <a href={web1}>
                  <img
                    src={web1}
                    alt="img"
                    className="rounded-circle img-fluid "
                  />
                </a>
                <h1 className="my-2">Pooja Dhayal</h1>

                <p>
                  <sup>
                    <i
                      className="fa fa-quote-left mr-2"
                      style={{ fontSize: "14px", color: "#ffca08" }}
                      aria-hidden="true"
                    ></i>
                  </sup>
                  <ReactReadMoreReadLess
                    charLimit={200}
                    readMoreText={"Read more ▼"}
                    readLessText={"Read less ▲"}
                    readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                  >
                    Dive to learn helped me to achieve my goals.I cleared UGC
                    NET exam in December ”
                  </ReactReadMoreReadLess>
                </p>
              </div>
            </div>
            <div className="carousel-item">
              <div className="testimonial_content">
                <a href={web2}>
                  <img
                    src={web2}
                    alt="img"
                    className="rounded-circle img-fluid "
                  />
                </a>
                <h1 className="my-2">Parul</h1>

                <p>
                  <sup>
                    <i
                      className="fa fa-quote-left mr-2"
                      style={{ fontSize: "14px", color: "#ffca08" }}
                      aria-hidden="true"
                    ></i>
                  </sup>
                  <ReactReadMoreReadLess
                    charLimit={200}
                    readMoreText={"Read more ▼"}
                    readLessText={"Read less ▲"}
                    readMoreStyle={{ color: "#00ba74", fontSize: "16px" }}
                  >
                    Hurreh!!!Finally, i got my JRF.Thank u so much Dive to
                    learn faculties.your video 
                    ”
                  </ReactReadMoreReadLess>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Explanation

There are a few things to keep in mind when you want to swap from a class component to a functional component.

1. Change the header from a class header into a function header. You would need to change this:

    export default class extends React.Component { render() { return ( //...something ); } }

   To this

   export () => { return ( //...something ); }

2. Update the usage of props if there's any. Assume that you use this.props somewhere in your component. You need to accept props as a parameter of your functional component and use that instead of this.props .

    export (props) => { console.log(`This is the props: ${props}`); return ( //...something ); }

3. Use the useState hook instead of this.state and this.setState . Learn more

4. If you ever have to use the life cycle functions ( componentDidMount ,...), consider learning more about the useEffect hook. Learn more