We Keep Coding

How can I display the result of a promise on a webpage in a react export

All articles I have read on promises show examples with console.log - I am using AWS Athena and want to display the result on the webpage in my React export. The react export does not allow the use of .then. So I need to resolve the promise to an external variable.
client is a aws athena client which returns a promise I need to resolve.
async function getResult(){
try {
return await client.send(command);
} catch (error) {
return error.message;
}
}
export default getResult()
I want to display the result in App.js
render()
{
return (
{ athena }
)
It displays in the console but not on the webpage as the page is loaded before the variable is resolved.
More complete example of App.js
import athena from './athena';
class App extends Component {
render()
{
let athena_result = athena.then(function(result) {
console.log(result)
}
)
return ( athena_result )
Causes Error
Error: Objects are not valid as a React child (found: [object Promise])

The render method of all React components is to be considered a pure, synchronous function. In other words, there should be no side effects, and no asynchronous logic. The error Error: Objects are not valid as a React child (found: [object Promise]) is the component attempting to render the Promise object.
Use the React component lifecycle for issuing side-effects. componentDidMount for any effects when the component mounts.
class App extends Component {
state = {
athena: null,
}
componentDidMount() {
athena.then(result => this.setState({ athena: result }));
}
render() {
const { athena } = this.state;
return athena;
}
}
If you needed to issue side-effects later after the component is mounted, then componentDidUpdate is the lifecycle method to use.
Class components are still valid and there's no plan to remove them any time soon, but function components are really the way going forward. Here's an example function component version of the code above.
const App = () => {
const [athenaVal, setAthenaVAl] = React.useState(null);
React.useEffect(() => {
athena.then(result => setAthenaVAl(result));
}, []); // <-- empty dependency array -> on mount/initial render only
return athenaVal;
}
The code is a little simpler. You can read more about React hooks if you like.

You can use a state, and just set the state to the response's value when it's done:
const Component = () => {
const [athena, setAthena] = useState(""); // Create a state with an empty string as initial value
// Send a request and on success, set the state to the response's body, and on fall set the state to the error message
useEffect(() => client.send(command).then((response) => setAthena(response.data)).catch((error) => setAthena(error.message)), []);
return <>{athena}</>;
};

ReactJS error getting object assigned from axios call to api

I have the following code:
import React, { Component } from 'react';
import axios from 'axios';
class Dashboard extends Component {
state = {
name : 'randomname',
apiData: {}
};
componentDidMount() {
axios.get('https://api_url/getdata)
.then(res => {
const apiData = res.data
this.setState({apiData});
});
}
render() {
const { name, apiData} = this.state;
//THIS WORKS
var objTest = [{game_id: 2}]; //This is returned from apical
console.log(objTest[0].game_id);
console.log(apiData); //logs the following: [{game_id: 2}]
console.log(apiData[0]); //logs the following: {game_id: 2}
console.log(apiData[0].game_id); //Error occurs See error below
return (
<div className="wrap">
TESTING
</div>
);
}
}
export default Dashboard;
While testing and trying to get game_id using: console.log(apiData[0].game_id); I get the following error:
TypeError: undefined is not an object (evaluating
'apiData[0].game_id')
I would like to know why this works when I declare a variable and assign it the same values as the api call returns. But it does not work then I'm assigning the api call to apiData. It can only access apiData[0] which returns {game_id:2} , but cannot access apiData[0].game_id.
Thanks for all the help!

The main issue here is the order of life cycle methods. During mounting phase the constructor and then the render method is called. ComponentDidMount is not called yet and hence your state is empty. The reason you are not getting error when you log apiData or apiData[0] is it simply loggs empty array or object during initial render call (mounting phase) and then the actual object during the second render after componentDidMount(updateing phase). But when you try to call the property(game_id), you get an error(undefined) during the mounting phase since you are calling it on an empty array/object.
The solution is check for the existance of the parent object before calling the property on it , for example , usine optional chaining (JS2020 new future) which checks apiData[0], the error should be fixed just py appending "?" after the object. you can also use other methods for older JS.
console.log(apiData[0]?.game_id)

ComponentDidMount is triggered after the render method has loaded. Which means that console.log(apiData[0]) is calling the default state first before componentDidMount method is called.
Default state is an empty object here and not an array. So the index 0 of apiData is nothing. Changing the default state to apiData: [{game_id: null}] will give you the result and state will change once the componentDidMount is triggered and the api is successfully called.
This however is not the best approach. It's just to make things clear and understandable.

Simply defined one flag in the state and check whether your data is available or not once you get data change that flag and and load your component element accordingly.
see below solution for your problem statement.
import React, { Component } from 'react';
import axios from 'axios';
class Dashboard extends Component {
state = {
loading:true,
name : 'randomname',
apiData: {}
};
componentDidMount() {
axios.get('https://api_url/getdata').then(res => {
this.setState({apiData:res.data, loading:false});
});
}
render() {
const { name, apiData, loading} = this.state;
//THIS WORKS
var objTest = [{game_id: 2}]; //This is returned from apical
console.log(objTest[0].game_id);
console.log(apiData); //logs the following: [{game_id: 2}]
console.log(apiData[0]); //logs the following: {game_id: 2}
console.log(apiData[0].game_id); //Error occurs See error below
return (
<div className="wrap">
{loading ? <div>Loading ...</div> : <div className="wrap">TESTING</div>}
</div>
);
}
}
export default Dashboard;

How to call a function in componentDidMount dynamically?

Consider this
componentDidMount() {
const { currentUserId, userList } = this.props;
//I get these from redux' mapStateToProps function;
//these are not passed down as regular props.
Mousetrap.bind(['shift+right'], () =>
nextUser(currentUserId, userList)
);
}
Say I have 10 users in my list, and we start with user 1. When I start the app, it will go from user 1 to user 2; However, it won't go any further since the value of currentUserId will eternally be user 1.
How can I circumvent this and have the arguments be dynamic, so that the arguments will be updated?
Edit: currentUserId & userList are passed on to the Component via Redux

If you want things to be dynamic, consider copying the currentUserId to the state in the constructor and adjusting the state as needed with this.setState({currentUserId: })
Example:
constructor(props) {
super(props);
this.state = { currentUserId: props.currentUserId };
}
componentDidMount() {
const { userList } = this.props;
const { currentUserId } = this.state;
Mousetrap.bind(['shift+right'], () =>
nextUser(currentUserId, userList)
);
}
I don't know how your nextUser function works but it if it returns the next userId, you could do:
Mousetrap.bind(['shift+right'], () =>
this.setState({currentUserId:nextUser(currentUserId, userList)});
);
in the componentDidMount().

If you need to update the function, after the component is mounted, you need to use componentDidUpdate to react to prop changes during the life of a component.
componentDidMount will be called once (when the component became visible) and your function will be set to the current prop => onClick will select the second user.
After that, your props change (currentUserId will now be the second user), but you don't update your function. That is why it will be stuck on the second user.
To achieve what you intend to do, use componentDidUpdate in combination with componentDidMount like this:
componentDidUpdate(prevProps) {
const { currentUserId, userList } = this.props;
if(prevProps.currentUserId !== currentUserId || prevProps.userList !== userList ) {
Mousetrap.bind(['shift+right'], () =>
nextUser(currentUserId, userList)
);
}
}
As an alternative, you could also remove the parameters from nextUser and let the action/reducer handle the update by setting the currentUserId within the reducer directly.
Hope this helps.
Happy coding.

event bus in React?

I'm mainly using Vue, and just recently picked up React. Loving it so far, and its quite similar in a lot of ways to Vue, which makes learning it way easier.
Now, let's consider two siblings component. I want to trigger something in component number one, when something happens in component number two. In Vue you can just bind window.bus = new Vue, and then emit in one of the components bus.$emit('event') and bind in the mounted() of the second component bus.$on('event', this.doSth).
How can you achieve that in React?

Event Bus is only a Global Function Register, can you use it
class _EventBus {
constructor() {
this.bus = {};
}
$off(id) {
delete this.bus[id];
}
$on(id, callback) {
this.bus[id] = callback;
}
$emit(id, ...params) {
if(this.bus[id])
this.bus[id](...params);
}
}
export const EventBus = new _EventBus();
The export const prevent multiple instances, making the class static

In the case of two sibling components, you would hold the state in the parent component and pass that state as a prop to both siblings:
class ParentComponent extends Component {
state = {
specialProp: "bar"
}
changeProp = () => {
// this.setState..
}
render() {
return (
<div>
<FirstSibling specialProp={this.state.specialProp} />
<SecondSibling changeProp={this.changeProp} specialProp={this.state.specialProp} />
</div>
);
}
}

For those that are still searching, look at this article: https://www.pluralsight.com/guides/how-to-communicate-between-independent-components-in-reactjs
The solution uses:
document.addEventListener for $on;
document.dispatchEvent for $emit;
document.removeEventListener for $off;
In my use case I had a component that contained a Refresh button that would trigger a data refresh in other components.
I did everything as it was presented in the article. In case you're using React with Functional Components, you might want to use the following useEffect:
useEffect(() => {
// The component might unmount when the request is in progress.
// Because of this an error will appear when we'll try to 'setData'.
let isMounted = true
const getData = () => {
reqData(db, path)
.then(result => {
if (isMounted) {
setData(result) // This is a useState
}
})
}
eventBus.on('refreshData', (data) => {
getData()
})
getData()
return () => {
isMounted = false
eventBus.remove('refreshData')
}
// Do not change the end of this useEffect. Keep it as it is. It simulates componentDidMount.
// eslint-disable-next-line
}, [])

A parent component can manage the state and methods consumed by child components when passed down through props.
The following example increments a count. SibOne displays the count and a button in SibTwo increments the count.
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div className="App">
<SibOne count={this.state.count}/>
<SibTwo incrementCount={this.incrementCount}/>
</div>
);
}
}
const SibOne = props => <div>Count: {props.count}</div>;
const SibTwo = props => (
<button onClick={props.incrementCount}>
Increment Count
</button>
);
Demo: https://codesandbox.io/s/zqp9wj2n63
More on Components and Props: https://reactjs.org/docs/components-and-props.html

Write-Once, use everywhere Event Bus (PubSub) system
I have used Vue for a long time and I enjoyed using the Event Bus too, was a pain that it wasn't readily available on react. Although, after a lot of research, I came up with an approach that should be easy to implement.
You can leverage Event Listeners and the CustomEvent API to implement the Event Bus architecture.
// event-bus.js file
const EventBus = {
$on (eventType, callback) {
document.addEventListener(eventType, (ev) => callback(ev.detail))
},
$dispatch (eventType, data) {
const event = new CustomEvent(eventType, { detail: data })
document.dispatchEvent(event)
},
$remove (eventType, callback) {
document.removeEventListener(eventType, callback)
}
}
export default EventBus
You can now go ahead to import the EventBus object to any file of choice, here is what the usage looks like for me.
For the publisher:
// publisher.js file
EventBus.$dispatch(message.name, message.value)
And on the subscriber's end:
// subscriber.js file
EventBus.$on('user.connect', (data) => console.log(data))

rxjs is one more option that you can explore. check if that can help you as they are providing observable and event based programs. It is also doing similar thing like what Eventbus is doing in vuejs.

React js, print out react component's state is not empty, but when call this.state, all data gone

In the React component's componentDidMount() I make an axios get request to receive a response and setState to the component. The response is correct, and when print out the component object in the component class with this, the object looks good. Then I call console.log(this.state), then every property of the component become empty. Why this happens? How can I get the state's property?
MyComponent.js
React component did mount method:
componentDidMount() {
getLastWeek(this); // here I make a get request
console.log('===');
console.log(this); // this line prints out an object will all the properties
console.log(this.state); // all properties of state disappear
}
The get request used above:
service.js
...
function getLastWeek(component) {
const lastWeek = getEndpoint(7);
Axios.get(lastWeek)
.then(res => {
const bpi = res.data.bpi;
const prices = Object.values(bpi);
component.setState({ lastWeek: prices });
})
.catch(err => {
console.log(err);
});
}
...

You are making an axios request which is an asynchronous function, so what is happening is you are using console.log(this.state) before the state gets set.
The render() method gets executed every time the state changes so if you put your console.log inside the render() method you should now see how your state change. Something like this:
class Example extends Component {
constructor() {
...
}
componentDidMount() {
...
}
render() {
console.log(this.state);
return(...);
}
}