React use one Component to many HTML Fragments

A react component is used to return multiple child component. Some of child component is used at multiple places. Suppose you have a piece of code which you want to reuse at multiple place. Then it is better to create component and reuse it at many times.

In this article, I will share with you how you can create a component which will be used at multiple times in React application.

Suppose you have a dropdown of whole countries list. You probably don't want to copy-paste whole drop-down all the time. In this condition, it is better to create a component and import it where you need it.

Here is the component which you want to create.

import React from 'react'

const Coutries = () => {
    return (
    <React.Fragment>
      <select name="countries">
        <option value="AF">Afghanistan</option>
        <option value="AL">Albania</option>
        <option value="DZ">Algeria</option>
        <option value="AD">Andorra</option>
        ...
      </select>
    <React.Fragment>
    )
  }
}

And use below anywhere you want to add in your React application.

import Countries from './Countries.js';

function App() {
  return (
    <>
     <Countries></Countries>
    </> 
  );
}

export default App;

I hope you liked and help in your work.