Home/ Questions/Q 454
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

How do you create reusable components?

  • 0
  • 0

An explanation of reusable components in React.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Tom reynolds2
    Beginner

    ⚡ Creating Reusable Components in React

    Reusable components make your code DRY (Don’t Repeat Yourself) and improve maintainability.

    • 💡 Goal: Build components that can adapt based on props.

    🛠️ Example 1: Reusable Button Component

    // Button.js
import React from 'react';

const Button = ({ label, onClick, type = 'button', style = {} }) => {
return (
<button type={type} onClick={onClick} style={{ padding: '10px 20px', ...style }}>
{label}
</button>
);
};

export default Button;

    ✅ Features:

    • label → Button text.
    • onClick → Event handler.
    • type → Supports ‘button’, ‘submit’, etc.
    • style → Allows custom inline styles.

    📋 Using the Reusable Buttons

    // App.js
import React from 'react';
import Button from './Button';

const App = () => {
const handleClick = (msg) => alert(msg);

return (
<div>
<h1>Reusable Button Example 🚀</h1>

<Button label="Primary Button" onClick={() => handleClick('Primary Clicked')} />

<Button
label="Danger Button"
onClick={() => handleClick('Danger Clicked')}
style={{ backgroundColor: 'red', color: 'white' }}
/>
</div>


);
};

export default App;

    💥 Result:

    • Two buttons with different styles and click behaviors—but the same component.

    🧩 Example 2: Reusable Input Field with Validation

    // InputField.js
import React from 'react';

const InputField = ({ label, value, onChange, type = 'text', placeholder, error }) => (
<div style={{ marginBottom: '15px' }}>
<label>{label}</label><br />
<input
type={type}
value={value}
onChange={onChange}
placeholder={placeholder}
style={{ padding: '8px', borderColor: error ? 'red' : '#ccc' }}
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);

export default InputField;

    📋 Using the Input Field:

    // App.js
import React, { useState } from 'react';
import InputField from './InputField';

const App = () => {
const [email, setEmail] = useState('');
const [error, setError] = useState('');

const validateEmail = (e) => {
const value = e.target.value;
setEmail(value);
setError(/\S+@\S+\.\S+/.test(value) ? '' : 'Invalid email');
};

return (
<div>
<h1>Reusable Input Field 🚀</h1>

<InputField
label="Email:"
value={email}
onChange={validateEmail}
placeholder="Enter your email"
error={error}
/>
</div>


);
};

export default App;

    ✅ Features:

    • Dynamic label, placeholder, and type.
    • Real-time validation with error messaging.

    💡 Tips for Creating Reusable Components:

    1. Use props wisely: Make your component adaptable through props.
    2. Default Props: Provide sensible defaults to avoid repetitive code.
    3. Use children: For flexible layouts (e.g., cards, modals).
    4. Styling: Support style overrides via props (style or className).
    5. Accessibility: Use semantic HTML and ARIA attributes when needed