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.
- 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.
- 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