My issue is with the return of "Clocks" (not "Clock") in the following code snippet in App.js
function App() {
return (
<div>
<section className="section">
<div className="box-main">
<div className="firstHalf">
<div className ="top-line">
<Clock></Clock><Quotes></Quotes>
</div>
<div className = "worldClocks">
<div><Clocks></Clocks></div>
</div>
The function "Clocks" is a timezone date & time calculation in "worldClocks.js" that produces this list of stock exchanges current time on screen, and displays them on separate lines like this...
ASX(10): 11:52:25 am
TSE(9:30): 10:52:25 am
SSE(9:15): 9:52:25 am
HKE(9:30): 9:52:25 am
SGX(9:00): 9:52:25 am
NSE(9:00): 7:22:25 am
DIFX(10:00): 5:52:25 am
RTS(9:30): 4:52:25 am
JSE(9:30): 3:52:25 am
FWB(9:30): 3:52:25 am
LSE(8): 02:52:25
BM/F(10): 22:52:25
NYSE(9.30): 9:52:25 PM
TXE(9.30): 9:52:25 PM
I am trying to get the css (in App.scss) to put them on one line, but nothing has worked. My Apps.scss relevant section is this.
.box-main {
color: white; //text colour
margin-left: 25px;
}
.firsthalf {
min-width: 100%;
display: flex;
}
.top-line {
font-size: 1em;
max-width: 100%;
display: flex;
align-content: space-between;
gap: 30px;
}
.worldClocks {
display: inline-flex;
flex-direction: row;
}
I am not sure how to find out what is being returned by the call to worldClocks but I am thinking that it is sending everything back in one go, not each worldClock calculation individually. If this is the case, my question is how do I use css to tell it to then display all those clocks on the same line? Can I pass css back through a function? What is the best practice approach to this, assuming that I am right about the cause.
EDIT: Below is the request for the worldClock.js file (fyi the clock.js file is not relevant, it is just similarly named and produces the current date and time but is not connected to this)
import React from 'react';
//import * as ReactDOM from 'react-dom';
import { Component } from 'react';
// Timezone strings - https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
// Changed update setInterval to 30 seconds (30000) instead of every second (1000)
class Clocks extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.updateDate = this.updateDate.bind(this);
}
componentDidMount() {
this.interval = setInterval(this.updateDate, 30000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
updateDate() {
this.setState({
date: new Date()
});
}
// Add all the world clocks wanted in here and in order of display
render() {
return (
<div>
<div>{this.props.name}</div>
<div>
<Clock
name="ASX(10): "
date={this.state.date}
country={"en-AU"}
timeZone={"Australia/Sydney"}
hour12={"false"}
/>
<Clock
name="TSE(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Tokyo"}
hour12={"false"}
//timeStyle="short"
/>
<Clock
name="SSE(9:15): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Shanghai"}
hour12={"false"}
//timeStyle="short"
/>
<Clock
name="HKE(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Hong_Kong"}
hour12={"false"}
/>
<Clock
name="SGX(9:00): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Singapore"}
hour12={"false"}
/>
<Clock
name="NSE(9:00): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Kolkata"}
hour12={"false"}
/>
<Clock
name="DIFX(10:00): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Dubai"}
hour12={"false"}
/>
<Clock
name="RTS(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Europe/Moscow"}
hour12={"false"}
/>
<Clock
name="JSE(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Africa/Johannesburg"}
hour12={"false"}
/>
<Clock
name="FWB(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Europe/Berlin"}
hour12={"false"}
/>
<Clock
name="LSE(8): "
date={this.state.date}
country={"en-GB"}
timeZone={"Europe/London"}
hour12={"false"}
/>
<Clock
name="BM/F(10): "
date={this.state.date}
country={"en-GB"}
timeZone={"America/Sao_Paulo"}
hour12={"false"}
/>
<Clock
name="NYSE(9.30): "
date={this.state.date}
country={"en-US"}
timeZone={"America/New_York"}
hour12={"false"}
/>
<Clock
name="TXE(9.30): "
date={this.state.date}
country={"en-US"}
timeZone={"America/Toronto"}
hour12={"false"}
/>
</div>
</div>
);
}
}
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
isHidden: true
};
this.showClock = this.showClock.bind(this);
}
showClock() {
this.setState({
isHidden: !this.state.isHidden
});
}
// This bit sends back the clock and the time
render() {
return (
<div>
<div>
{this.props.name}
{this.props.date.toLocaleTimeString(this.props.country, {timeZone: this.props.timeZone})}
</div>
</div>
)
}
}
//ReactDOM.render(<Clocks name="THE CLOCK" />, document.getElementById("root"));
export default Clocks;
CodePudding user response：
In your worldClock.js file the div that encloses all the Clock components, can you add a class to it and make that class display: inline
CodePudding user response：
Maybe you can try making the most immediate div wrapping the multiple Clock components inside you Clocks component to be display: inline. That will be the one below div{this.props.name}div
I think that should work.