Create a Dot Navigation Component in React with Typescript.
Tags: react, typescript, component, paginaton
Published: 2021-01-16 12:59:13

### In this Content, we will see how to develop a component in react.

## Installation
To start a new Create React App project with TypeScript, you can run:

```typescript
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript
```

After installation is done, open this project in your Code Editor, I prefer to use VSCode.

For styling component I am using styled-component.

```typescript
yarn add styled-components
yarn add @types/styled-components
```

## Next Step

Create a `tsx` file in your `src` folder named DotNavigation.tsx

```typescript
export const DotNavigation = () => {
  return (
    <div>
      
    </div>
  );
}
```

the above Component will be responsible for handling the all dots.

![Screenshot 2021-01-15 at 7.35.22 PM](https://dev-to-uploads.s3.amazonaws.com/i/kvqljm59ld6dqw67br6n.png)

🤔 How can I add circular dots?

💡 let me create a new styled component.

```typescript
///1
import styled from "styled-components";

///2
export const Dots = styled.button`
  /// 3
  outline: none;
  border: none;
  width: 20px;
  height: 20px;
  margin: 8px;
  border-radius: 50%;
`;
```

1. First import styled from `styled-components` package.
2. Create a constant for creating dots.
3. Adding some `css` properties to the `Dot`

 ![Screenshot 2021-01-15 at 5.36.00 PM](https://dev-to-uploads.s3.amazonaws.com/i/mvxzzqeqshh2ud9j6bnk.png)

> Lets use these dots in DotNavigation component.

```typescript
export const DotNavigation = () => {
  return (
    <div>
      <Dots />
    </div>
  );
}
```

The above snippet will creating only single circle with default background.

Let's add more feature on Dots.

```typescript
///1
interface IDotState {
  active: boolean;
}

///2
export const Dots = styled.button<IDotState>`
  ....
  
  ///3
  background: ${(props: IDotState) => 
                (props.active ? "blue" : "gray")};
`;
```
 
1. Created a custom prop interface with a bool value that will track the current dot is selected or not.
2. Pass the Props type in the Dots component.
3. Set the background color based on the `*active props*` state.

Now use this prop in DotNavigation.

```typescript
export const DotNavigation = () => {
  return (
    <div>
      <Dots/>
      <Dots active/>
    </div>
  );
}
```

> Next Step is add more dots:

```typescript
export const DotNavigation = () => {
  
  /// 1
  const count = 3; 

  /// 2
  const data: Array<{ id: string }> = [];

  /// 3
  for (let index = 0; index < count; index++) {
    const object = {
      id: index.toString()
    };

    /// 4
    data.push(object);
  }

  /// 5
  const [activeDot, setActiveDot] = React.useState(0);
  
  return (
    <div>
      /// 6
      {data.map((item, i) => (
        <Dots
          /// 7
          onClick={() => { setActiveDot(i) }}
          /// 8
          active={i === activeDot}
          key={i.toString()}
        />
      ))}
    </div>
  );
}
```
1. Set the total count of Dots that want to display.
2. Initialize a data array.
3. Iterating the loop for array creation.
4. Pushing each element in the array.
5. Using hooks to track the current dot element.
6. Iteration and creating the Dots in react render.
7. Addin `onclick` of each Dots so that will track the selected dots.
8. Set the current dot activated.

![Screenshot 2021-01-15 at 7.33.07 PM](https://dev-to-uploads.s3.amazonaws.com/i/cdcyzvsowyqj7tzsp6x3.png)
![Screenshot 2021-01-15 at 7.37.18 PM](https://dev-to-uploads.s3.amazonaws.com/i/fa47jlhw05o2n1u0y4qw.png)
![Screenshot 2021-01-15 at 7.37.25 PM](https://dev-to-uploads.s3.amazonaws.com/i/mphb9amxzzhfuv1sn87g.png)

🎉 It's working !!!

Many thanks for reading this content.
Umesh