React clock via props
React clock via props
If you want to create a clock component in React and pass the time through props, there are a few steps to take.
Step 1: Create a Clock Component
Create a new file called Clock.js
and import React
and PropTypes
:
import React from 'react';
import PropTypes from 'prop-types';
class Clock extends React.Component {
render() {
return (
<div>
{this.props.time}
</div>
);
}
}
Clock.propTypes = {
time: PropTypes.string.isRequired,
};
export default Clock;
In this example, we have a simple Clock
component that takes a time
prop and displays it in a div. We also define a prop type for the time
prop to make sure it is a string.
Step 2: Pass the Time through Props
Now we can use our Clock
component and pass the time through props. Here is an example:
import React from 'react';
import Clock from './Clock';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
time: new Date().toLocaleTimeString(),
};
}
componentDidMount() {
setInterval(() => {
this.setState({
time: new Date().toLocaleTimeString(),
});
}, 1000);
}
render() {
return (
<div>
<Clock time={this.state.time} />
</div>
);
}
}
export default App;
In this example, we use the setInterval
function to update the time
state every second. We then pass the time
state through props to our Clock
component.
Alternative: Using Functional Component
You can also create a clock component using a functional component instead of a class component:
import React from 'react';
import PropTypes from 'prop-types';
function Clock(props) {
return (
<div>
{props.time}
</div>
);
}
Clock.propTypes = {
time: PropTypes.string.isRequired,
};
export default Clock;
With this method, you don't need to extend the React.Component
class. You simply define a function that takes props as an argument and returns JSX.
Conclusion
In this tutorial, we learned how to create a clock component in React and pass the time through props. We also explored an alternative way of creating the clock component using a functional component. Now you can easily add a clock to your React app!