create and animal class in react hooks which extends others

Lussy04

2 min read

·

23-01-2025

1

0

Share

This article demonstrates how to create and extend a reusable Animal class component in React using Hooks. We'll build upon this base class to create specific animal types, showcasing the power and flexibility of this approach. This method allows for cleaner code, better organization, and easier maintenance compared to individually creating each animal component.

Setting up the Base Animal Component

Our foundation will be a functional component using Hooks. This component will hold common properties and methods for all animals.

import React, { useState } from 'react';

const Animal = ({ name, sound, initialAge }) => {
  const [age, setAge] = useState(initialAge);

  const makeSound = () => {
    console.log(`${name} says ${sound}!`);
  };

  const growOlder = () => {
    setAge(age + 1);
  };

  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <button onClick={makeSound}>Make Sound</button>
      <button onClick={growOlder}>Grow Older</button>
    </div>
  );
};

export default Animal;

This Animal component takes name, sound, and initialAge as props. It manages the animal's age using the useState hook and provides methods to make a sound and increment the age.

Extending the Animal Component: Dog and Cat Examples

Now let's extend this base component to create specific animal types like Dog and Cat. We can do this by creating new components that compose the Animal component and add specific features.

Dog Component

import React from 'react';
import Animal from './Animal';

const Dog = ({ name, breed, initialAge }) => {
  return (
    <Animal name={name} sound="Woof!" initialAge={initialAge}>
      <p>Breed: {breed}</p>
    </Animal>
  );
};

export default Dog;

The Dog component takes a breed prop in addition to the properties inherited from Animal. It renders the Animal component, passing along the necessary props and adding a paragraph to display the breed. This shows how easily we can extend functionality.

Cat Component

Similarly, we can create a Cat component:

import React from 'react';
import Animal from './Animal';

const Cat = ({ name, color, initialAge }) => {
  return (
    <Animal name={name} sound="Meow!" initialAge={initialAge}>
      <p>Color: {color}</p>
    </Animal>
  );
};

export default Cat;

The Cat component adds a color prop and uses "Meow!" as the sound. Notice the consistent structure; we're reusing the core functionality of Animal and adding unique characteristics for each animal type.

Using the Components

Now we can use these components in our main application:

import React from 'react';
import Dog from './Dog';
import Cat from './Cat';

const App = () => {
  return (
    <div>
      <Dog name="Buddy" breed="Golden Retriever" initialAge={3} />
      <Cat name="Whiskers" color="Gray" initialAge={1} />
    </div>
  );
};

export default App;

This renders both a Dog and a Cat component, demonstrating the inheritance and extension.

Advantages of this Approach

• Reusability: The Animal component provides a common foundation, reducing code duplication.
• Maintainability: Changes to core animal functionality only need to be made in one place.
• Organization: The code is cleaner and easier to understand.
• Extensibility: Adding new animal types is straightforward.

This example showcases a powerful and efficient way to create and manage related components in React using Hooks and composition. Remember to adjust props and functionality to fit your specific needs and the complexity of your animal attributes.