React Must-Use Code Snippets

This repository contains essential React code snippets that address common issues and enhance development efficiency. These snippets help manage JSX rendering from arrays and conditional JSX rendering based on specified conditions.

Table of Contents

• Snippets Included
  • MapRenderer Component
    • Usage
  • Render Component with Conditional Rendering
    • Usage
• Getting Started
  • Installation
  • Usage
• Contributing
• License
• Contact

Snippets Included

1. MapRenderer Component
2. Render Component with Conditional Rendering

MapRenderer Component

The MapRenderer component simplifies the process of rendering JSX elements from an array, ensuring that the "missing key props" warning is avoided.

Usage

import { MapRenderer } from './MapRenderer';

const data = [/* array of items */];
const renderFunction = (item, index) => (
  <div key={index}>{item}</div>
);

<MapRenderer data={data} render={renderFunction} />

Render Component with Conditional Rendering

The Render component provides a clean way to conditionally render JSX elements, reducing the complexity of nested ternary operators and enhancing code readability.

Usage

import { Render } from './Render';

<Render>
  <Render.If condition={/* some condition */}>
    <div>Conditionally Rendered Content</div>
  </Render.If>
  <Render.Else>
    <div>Default Rendered Content</div>
  </Render.Else>
</Render>

Getting Started

Installation

Clone the repository and navigate to the project directory:

git clone https://github.com/nelsonmandeladev/react-must-used.git
cd react-must-used

Usage

1. Import the required components into your React project.
2. Utilize the provided components as demonstrated in the usage examples above.

Contributing

Contributions are welcome! Please fork the repository, make your changes, and submit a pull request.

1. Fork the repository.
2. Create a new branch: git checkout -b my-feature-branch.
3. Make your changes and commit them: git commit -m 'Add some feature'.
4. Push to the branch: git push origin my-feature-branch.
5. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or suggestions, please open an issue or contact me directly at [email protected].