- Import component Counter from file
components/Counter.js
to App.js and use it as a component in the app - Edit the
Counter.js
to use state hook, on click on the button the "counter should increase" - Edit the
Counter.js
add second button "Click to decrease" which should decrease the counter
FYI: You might comment out the componnet in app.js once you finish it.
State can be used for conditional rendering where we want to display different things based on the state. We might have multiple state variables in one component.
- Import component
Welcome
from filecomponents/Welcome.js
to App.js and use it as a componet in a the app - Add state to the component, on the first render we should render the form
- On submit we should change the output to welcome message
- Add button to the welcome message which will reset the component (by using change of state)
- Import component
Timer
from filecomponents/Timer.js
to App.js - The clock should change the color when you change the item from drop down
- Explore files
components/Timer.js
andcomponents/Clock.js
and try to fix the issue. - You can use
console.log(xxx)
ordebugger
to help you with debugging the issue.
- Import component
SimpleEffect
fromSimpleEffect.js
- Implment the 3 effects metioned in the component
- Import component
ApiCall
fromApiCall.js
- The goal fo the component is to be able to select the id of the movie. And than do API call using useEffect to https://swapi.dev/api/films/2/?format=json with the ID you selected. Use axios to call the API.
- You will have to add 2 states. One to hold the selected ID. One to hold the data. Third in case you want to do handle loading properly.
- When the option changes save it to state, have your effect react to the state change. Call the API . Save the result of the API call to state.
- Displaye the state in the html.
- Check that when you refresh the page it works. Consider what you want to have as initial state.
- Try to Format the output! Using html divs, list, tables - you can utilize additional components - use styling.
Here is example without the formatted output:
- Copy the file ApiCall.js a make a new one ApiCallSecond.js or something ...
- Edit the Component in a way that first you make a request to https://swapi.dev/api/films/?format=json and you will create the select option dynamically on the output of this API request. (I know that it returns all all the data, but care only about the id (array index) and name of the film.)
- Than the component should behave the same as in taks 5