Skip to main content

React append text app

There are 4 buttons A, B, C, D and On click of each button text associated with that will be appended to the output.

  1. If you click on any button the text of that button along with an arrow mark will be printed on the screen. Ex: If you click A, C, D, B then on UI A-C-D-B- will be printed.
  2. If you on any button again then that text will be appended to the end. Ex: After step 1, if you click C, B, A then output will be A-C-D-B-C-B-A will be printed on screen. Duplicates are allowed.
Result
Loading...
Live Editor

function App() {
  const [text, setText] = useState("");
  const buttons = ["a", "b", "c", "d"];
  const handleAppendText = (val) => {
    let temp = `${text}${val}->`;
    setText(temp);
  };
  return (
    <div className="App">
      {buttons.map((each) => (
        <button onClick={() => handleAppendText(each)} key={each}>
          {each}
        </button>
      ))}
      <br />
      output:{text}
    </div>
  );
}

watch here -> https://youtu.be/LD547QCDEYI?si=0zQykJLvRm40KElg