Conversation
| this.state = { | ||
| display: <></>, | ||
| }; | ||
| this.timezonesInput = React.createRef(); | ||
| this.inputForm = ( | ||
| <Form className="w-50" onSubmit={() => this.submit()}> | ||
| <Form.Group className="mb-3"> | ||
| <Form.Label>Set-up your clocks</Form.Label> | ||
| <Form.Control | ||
| type="text" | ||
| placeholder="Asia/Singapore America/Detroit" | ||
| ref={this.timezonesInput} | ||
| /> | ||
| </Form.Group> | ||
| <Button variant="light" onClick={() => this.submit()}> | ||
| Show me the time! | ||
| </Button> | ||
| </Form> | ||
| ); | ||
| this.state.display = this.inputForm; |
There was a problem hiding this comment.
This whole definition could be simplified I think. Why do you need all the rendered elements in the state? I think it would be wiser to just render those in the component.
| this.state = { | ||
| display: <></>, | ||
| }; | ||
| this.timezonesInput = React.createRef(); |
There was a problem hiding this comment.
Is the ref necessary? What are you trying to achieve by using this?
| import "bootstrap/dist/css/bootstrap.min.css"; | ||
| import { Form, Button } from "react-bootstrap"; | ||
|
|
||
| class WorldClock extends React.Component { |
There was a problem hiding this comment.
Is this component necessary? I feel like it just adds another layer but doesn't really do anything
There was a problem hiding this comment.
My bad. It is the component of the last step, though you have implemented it differently than what the instructions told you. In this case I feel this component is somewhat redundant, therefore the comment above
| }; | ||
| this.timezonesInput = React.createRef(); | ||
| this.inputForm = ( | ||
| <Form className="w-50" onSubmit={() => this.submit()}> |
There was a problem hiding this comment.
Do we really need a form? I think a simple input + state update would be sufficient here. Or do you have a reason to use a form?
| return ( | ||
| <p className="m-0"> | ||
| {this.state.date.toLocaleString("en-GB", { | ||
| timeZone: this.props.timeZone, |
There was a problem hiding this comment.
I think this value does not need to come from a user input tbh. But rather should be a static display based on a time zone. If you want the user to define these, of course you can do it however - then you need to worry about where to store that input.
Overall I feel there is a bit too much abstraction in this file. You could simplify this by taking away some layers, by defining what you want to achieve more clearly and rethinking how you want to utilize state.
2 participants
No description provided.