React Custom Hook and JSX
Tags: javascript, react, programming, beginners
Published: 2021-12-28 13:56:22


## React Custom Hooks

> Custom Hooks

The reusable function can be a Hook. When we create a logical function, that function can be used in multiple components. For that we can extract out logic to reuse. A hook function  name start with “use” example: **“useFetch”**

> Usually we need to fetch data in different components like this.

```javascript
import { useState, useEffect } from "react";

const Home = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;

```

> So now we can create a Hook for fetch logic as we can reuse it in other components. Like this,

```javascript
import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

```

> Now we can fetch data with our custom Hook. as usual
 

```javascript
import react from "react";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;

```


## JSX with React
JSX stands for Javascript XML. normally we can not write HTML in react without createElement() or appendChild() method. But JXL allows us to write HTML in Javascript to place in DOM. JSX converts HTML code into react element and it is an extension of Javascript based on ES6.

> Without JSX

```javascript
import react from "react";
const Home () => {
	const myElement = react.createElement("h2", {}, "we are not using JSX");
return (
	{myElement}
 );
};
export default Home;

```

> With JSX

```javascript
import react from "react";

const Home () => {

return (
	<h2>we are using JSX</h2>
 );
};
export default Home;

```

> Expressions in JSX
React components accept only elements. It can be with one HTML tag or fragment also can use parameter in **{ } ”curly bracket”**

```javascript
import react from "react";
const Home () => {
const heading = “Expressions in JSX”
return (
	<div>
        <h>{heading}</h1>
        <p>we are using JSX</p>
        <span>react accept only one section.</span>
     </div>
  );
};
export default Home;

```

> With fragment <> </>

```javascript
import react from "react";
const Home () => {
return (
     <>
	   <div>
            <h>heading</h1>
            <p>we are using JSX</p>
            <span>react accepts only one section.</span>
        </div>
        <div>
            <h>heading</h1>
            <p>we are using JSX</p>
            <span>react accepts only one section.</span>
        </div>
    </>
  );
};
export default Home;

```

> Elements must be closed and class attribute is className

```javascript
import react from "react";
import logo from "./logo.favicon";
const Home () => {
return(
	<input className= "email" type= "email" />
     <img className= "logo" src= {logo} />
  );
};
export default Home;

```