JSON Formatter and Validator

You need to build a React.js application that allows users to format, validate, and minify JSON. The app should also handle invalid JSON gracefully by showing an error message. Additionally, the app must provide an option to clear everything (input, output, and messages).

Requirements

Input Field

• A <textarea> where users can enter JSON.
• Must be accessible via data-testid="json-input".

Buttons

Format Button (data-testid="format-btn")

• Should format valid JSON with proper indentation.
• On success → show JSON formatted successfully! in a success message (data-testid="success-message").
• Display the formatted JSON inside an element with data-testid="formatted-output".
• If invalid JSON → show an error message (data-testid="error-message").

Validate Button (data-testid="validate-btn")

• Should check whether the input is valid JSON.
• If valid → show Valid JSON! in data-testid="success-message".
• No formatted output should be shown.
• If invalid → show exact error starting with Invalid JSON: in data-testid="error-message".

Minify Button (data-testid="minify-btn")

• Should convert valid JSON into a compact single-line string.
• On success → show JSON minified successfully! in data-testid="success-message".
• Display minified JSON in data-testid="formatted-output".
• If invalid → show Invalid JSON: error.

Clear Button (data-testid="clear-btn")

-Should reset Input field (empty string "").

• Any success or error messages.
• Any formatted output.

Messages

• data-testid="success-message" → Success messages like "Valid JSON!", "JSON formatted successfully!", "JSON minified successfully!".
• data-testid="error-message" → Error messages like "Invalid JSON: Unexpected token...".
• Only one type of message (success or error) should be visible at a time.

Constraints

• Must be built with React.js.
• You can use React hooks (useState, etc.).
• Use only built-in JSON.parse and JSON.stringify methods for validation, formatting, and minifying.
• Ensure proper conditional rendering for messages and output.

Expected Test Coverage

• Your app will be tested against these scenarios:
• Formatting valid JSON → success message & formatted output.
• Validating valid JSON → "Valid JSON!" with no output.
• Validating invalid JSON → error message only.
• Minifying valid JSON → success message & minified output.
• Clearing → input, messages, and output reset.