JSX Exercise | Solution

Create a New File

Create a new file in the src folder of your React project and name it:

ToDo.jsx


Write the ToDo Component

Here’s the complete code:

function ToDo() {
function callFun() {
alert("Function called");
}

return (
<div>
<h1>Anil Sidhu Todos</h1>

<img
src="https://st5.depositphotos.com/1703608/69112/i/450/depositphotos_691120514-stock-photo-adorable-labrador-puppy-closeup-isolated.jpg"
alt="dog"
className="photo"
/>

<ul>
<li>Invent new traffic light</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>

<button onClick={callFun}>Click Me</button>
</div>
);
}

export default ToDo;

Note:

We’ve added an onClick event to the button that calls the callFun() function when clicked.


Import and Use the Component in App.jsx

import ToDo from "./ToDo";

function App() {
return <ToDo />;
}

export default App;