DEV Community: Asad ur Rehman

Another React ReadMoreComponent

Asad ur Rehman — Thu, 19 Jan 2023 15:50:09 +0000

Here is another implementation for a ReadMoreComponent for React.


const AnotherReadMoreComponent = ({ text, cutOff }) => {
  const [showReadMore, setShowReadMore] = useState(true);
  const [displayMore, setDisplayMore] = useState(true);
  const getText = () => {
    if (text?.length <= cutOff) {
      setDisplayMore(false);
      return text;
    } else {
      return text.slice(0, cutOff);
    }
  };
  useEffect(() => {
    getText();
  }, []);
  return (
    <div>
      <p
        style={{
          textAlign: "justify"
        }}
      >
        {showReadMore ? getText() : text}

        {displayMore && (
          <span
            style={{
              display: "inline",

              cursor: "pointer"
            }}
            onClick={() => {
              setShowReadMore(!showReadMore);
            }}
          >
            {showReadMore ? "...more" : "...less"}
          </span>
        )}
      </p>
    </div>
  );
};

In this example, the component accepts two props text and cutOff which is the full text to be displayed and how much length you want to display.

When the component is rendered, it will show the short text version of the content with a "read more" text to click on. When the text is clicked, the component's state is updated to show the full text and a "...less" button.

This component also uses a getText() method which checks if the text length is less than or equal to cutOff it displays the whole string without more or less options.

You can use this component in other component by passing the text and cutOff as prop.

<AnotherReadMoreComponent

text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

cutOff="100"

/>



<AnotherReadMoreComponent

text="Sed ut perspiciatis unde omnis iste natus "

cutOff="10"

/>

For Live Demo here is the link : https://codesandbox.io/s/relaxed-babbage-3mwo1y?file=/src/App.js:1024-2080

How Babel transforms JSX to React.createElement()

Asad ur Rehman — Mon, 02 Jan 2023 06:18:33 +0000

Consider the following component

const AnimalJSX = (props)=>{
    return (
        <div>
            <h1>{props.name}</h1>
            <p>{props.description}</p>
        </div>
    )
}

<AnimalJSX name="Dog" description="A brief description"/>

What is JSX ? It is a syntax extension to Javascript to describe what the UI shoudl look like.. JSX produces react elements which are renderd on browser. Babel is used to transform JSX to raw javascript.

Ever wondered how this works under the hood how babel transforms this to raw javascript methods of React.

React uses React.createElement() to create an elements that needs to be rendered. Here is a simplified version of the createElement function signature.

React.createElement(type,props,children)

type: the type of element you want to create for example: h1,h2, div,span or another React.createElement() object.

props: the props we want to pass into the components for example className for styling or other parameters.

children: An array of text nodes or other React.createElement objects we want to render as children for this particular component.

If you pass a text value as an array object it will be treated as a text node only.

Consider the following code that renders the AnimalJSX component but using createElement method.

const Animal = (props)=>{
    return React.createElement("div",{},[
        React.createElement("h1",{key:1},props.name),
        React.createElement("p",{key:2},props.description)
    ])
}

Now if we want to render the Animal component in vanilla react without using JSX here is how we'll do it

const container = document.getElementById("root");

const root = ReactDOM.createRoot(container);

root.render(React.createElement(Animal,{name:'Dog',description:'A type of dog'},null));

We can either omit the children parameter or just for clarity I am passing null to it. This will render as following:

React-17 vs React-18 Root Render Changes

Asad ur Rehman — Mon, 02 Jan 2023 04:48:01 +0000

React-17 vs React-18 Root Render Changes.

React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

As react can be added to any javascript based application. I have created two vanilla html files

React-17.html & React-18.html

For understanding purposes I am using development cdn version from ### unpkg

Up to React-17 we use the ReactDOM.render() method to directly render the components by using ReactDOM.render() method.

ReactDOM.render(
React.createElement(<Your App or Root Component>),
document.getElementById("root")
);

ReactDOM takes the component and renders it to the target div on the page in this case "root" as created in React-17.html

However in React-18 ReactDOM.render api is no longer available and in order to Render a component using react we have to use the render method of createRoot() method to render Component

In order to use createRoot.render method we first need to pass our target "div / container" to the createRoot method of ReactDOM as done in React-18.html

const container = document.getElementById("root");

We are getting the target div by using javascript DOM method.

we'll pass the target element to the createRoot() method

const root = ReactDOM.createRoot(container);

you can use any variable names for root or container.

This will create a root or parent container where the react elements will be rendered. In order to render our root component pass it to the render() method of root by using React.createElement()

root.render(React.createElement(<Your App or Root Component>));

These changes are already part of updated create-react-app. This is repo is just for understanding purposes on how the React.18 has changed the root rendering for the app.

For a quick overview here is the difference in terms of just the raw javascript codes

React-17

<script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      ReactDOM.render(
        React.createElement(App),
        document.getElementById("root")
      );
</script>

React-18

<script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
</script>

The complete html files are listed below for reference.

React-17.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">React App is not Rendered</div>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      ReactDOM.render(
        React.createElement(App),
        document.getElementById("root")
      );
    </script>
  </body>
</html>

React-18.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">React App is not Rendered</div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
    </script>
  </body>
</html>

For more details please check: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis