Doctor Who's Police Box is a T.A.R.D.I.S (Time and Relative Dimension In Space), a fantastical space ship that can fly through time and space and other mind-bending-ly impossible situations. It can go anywhere.
Today, you're going to help the T.A.R.D.I.S. navigate through a React App in the form of an object
tardis = {
name: 'Time and Relative Dimension in Space',
caps: false,
}
- Clone this repo and cd into it.
- Run
npx create-react-app tardis
and cd into that app to get started.
To aid in visualization here is some css. Every div will have a blue border and have some space around it for easy distinction between divs.
@import url('https://fonts.googleapis.com/css?family=Poppins');
body {
margin: 1em;
padding: 1em;
font-family: 'Poppins', sans-serif;
background: #FEFFE9;
text-align: center;
}
div {
margin: auto;
width: 80%;
box-shadow: 0 0 8px dodgerblue;
padding: 1em;
background: white;
}
- Remove excessive code from
App
component class - render a
div
- inside the
div
, put anh3
that will render thename
property from the state
T.A.R.D.I.S. properties inside state:
tardis: {
name: 'Time and Relative Dimension in Space',
caps: false,
}
- Add a function that gets called on click and changes the text
- On click, the text will change from caps to lower case and change the caps property.
- Get the click function to work
- These new components tiny and you'll be working between them. It's ok to do this all in one file
App.js
.
- Create a New Function Component
DivOne
- have it render a div
- move the h3 to inside the div in this component
- work on passing the data from state down
- work on getting the click function work properly
- Create a New Function Component
DivTwo
- have it render a div
- move the h3 to inside the div in this component
- work on passing the data from DivOne down
- work on getting the click function to work properly
- Create a New Function Component
DivThree
- have it render a div
- move the h3 to inside the div in this component
- work on passing the data from DivTwo down
- work on getting the click function to work properly
- Create another
DivThree
InsideDivTwo
- how should it render?
- will the function affect one or both divThrees?
- should it affect one or both?
- refactor your code so that each tardis is updating independent of the other one, if it isn't already