Assignment

[tausif39]

To design a React app that removes duplicate characters from a string, we need to follow the following steps:

Create a new React component called "DuplicateRemover". Create a state variable called "inputString" that will store the user's input string. Create a state variable called "outputString" that will store the modified string after removing duplicates. Add a text input element to allow the user to enter a string. Add a button element to trigger the function that removes duplicates. Create a function called "removeDuplicates" that takes the input string, removes any duplicate characters, and returns the modified string. When the user clicks the button, call the "removeDuplicates" function with the input string, and update the "outputString" state variable with the modified string. Add an element to display the modified string to the user. Here's what the code might look like:

import React, { useState } from 'react';

function DuplicateRemover() {
  const [inputString, setInputString] = useState('');
  const [outputString, setOutputString] = useState('');

  const removeDuplicates = (str) => {
    let newStr = '';
    for (let i = 0; i < str.length; i++) {
      if (newStr.indexOf(str[i]) === -1) {
        newStr += str[i];
      }
    }
    return newStr;
  };

  const handleClick = () => {
    const newString = removeDuplicates(inputString);
    setOutputString(newString);
  };

  return (
    <div>
      <label htmlFor="inputString">Enter a string:</label>
      <input
        id="inputString"
        type="text"
        value={inputString}
        onChange={(e) => setInputString(e.target.value)}
      />
      <button onClick={handleClick}>Remove Duplicates</button>
      <p>{outputString}</p>
    </div>
  );
}

export default DuplicateRemover;