class Mailbox extends Component {
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
var user = firebase.auth().currentUser.uid;
let cityRef = db.collection("Users").doc(user);
let getDoc = cityRef
.get()
.then((doc) => {
if (!doc.exists) {
console.log("No such document!");
} else {
console.log("Document data:", doc.data());
let data = doc.data();
console.log(data.EmailBody);
console.log(data.EmailSubject);
}
})
.catch((err) => {
console.log("Error getting document", err);
});
}
});
}
render() {
return (
<>
<div id="ZenTitle">
<h1>ZenMail Mailbox</h1>
</div>
<div id="MainArea" className="MainArea">
<Popup
trigger={
<button className="ComposeButton">
<i class="fas fa-pen-square" style={{ color: "white" }}></i>{" "}
Compose
</button>
}
position="center center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Compose New Email</div>
<br />
<NormEdit />
</Popup>
<Button className="RefreshButton">
<i style={{ color: "black" }} class="fas fa-sync"></i>
</Button>
<Button className="FavButton">
<i style={{ color: "black" }} class="fas fa-star"></i>
</Button>
<Button className="DeleteButton">
<i style={{ color: "black" }} class="fas fa-trash-alt"></i>
</Button>
<Form>
<FormGroup>
<Label></Label>
<Input className="EmailSearch" placeholder="Search Emails..." />
</FormGroup>
</Form>
<Popup
trigger={
<button className="SettingsButton">
<i style={{ color: "black" }} class="fas fa-cog"></i>
</button>
}
position="right center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Account Settings</div>
</Popup>
<Inbox />
<div className="IncomingArea">
<SingleEmail From="Testing" Subject="Testing" Date="testing" />
</div>
So basically what I am trying to do here is I am trying to pass my
data.EmailBody
data.EmailSubject
from my componentDidMount as props down into my
<SingleEmail From="Testing" Subject="Testing" Date="testing" />
but am struggling to figure out how to do so. The few ways I tried do not seem to be working. I am somewhat new to react and I tried doing it with static props but it does not seem to be possible to do it that way from what I could tell. I would appreciate any suggestions =] Hope everyone is staying safe
use state
and set the state using setState
when you get the data then pass it on to the component.
Like this:
class Mailbox extends Component {
state = {
data: {
EmailBody: '',
EmailSubject: '',
}
};
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
var user = firebase.auth().currentUser.uid;
let cityRef = db.collection("Users").doc(user);
let getDoc = cityRef
.get()
.then((doc) => {
if (!doc.exists) {
console.log("No such document!");
} else {
console.log("Document data:", doc.data());
let data = doc.data();
this.setState({
data,
})
console.log(data.EmailBody);
console.log(data.EmailSubject);
}
})
.catch((err) => {
console.log("Error getting document", err);
});
}
});
}
render() {
return (
<>
<div id="ZenTitle">
<h1>ZenMail Mailbox</h1>
</div>
<div id="MainArea" className="MainArea">
<Popup
trigger={
<button className="ComposeButton">
<i class="fas fa-pen-square" style={{ color: "white" }}></i>{" "}
Compose
</button>
}
position="center center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Compose New Email</div>
<br />
<NormEdit />
</Popup>
<Button className="RefreshButton">
<i style={{ color: "black" }} class="fas fa-sync"></i>
</Button>
<Button className="FavButton">
<i style={{ color: "black" }} class="fas fa-star"></i>
</Button>
<Button className="DeleteButton">
<i style={{ color: "black" }} class="fas fa-trash-alt"></i>
</Button>
<Form>
<FormGroup>
<Label></Label>
<Input className="EmailSearch" placeholder="Search Emails..." />
</FormGroup>
</Form>
<Popup
trigger={
<button className="SettingsButton">
<i style={{ color: "black" }} class="fas fa-cog"></i>
</button>
}
position="right center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Account Settings</div>
</Popup>
<Inbox />
<div className="IncomingArea">
<SingleEmail dataSubject={this.state.data.EmailSubject} dataEmail={this.state.data.EmailBody} From="Testing" Subject="Testing" Date="testing" />
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.