Learning React with Typescript - reactjs

Question

I have used observables in Angular, but I am having an issue in finding good examples on how to uses observables with React using Javascript. My end goal is to use hard coded data in a service.ts example
import { of, Observable } from 'rxjs';
export interface Volunteer {
firstName: string;
lastName: string;
totalHoursLogged: number;
}
const tempVolunteers: Volunteer[] = [
{ firstName: 'John', lastName: 'Smith', totalHoursLogged: 85 },
];
export const getAllVolunteers = (): Observable<Volunteer[]> => of(tempVolunteers);
I want to make a list component to build the mock data as it is push from the observable.
I would export the react component into the App.tsx and display the
mock data
If anyone knows of good resources or has any advice, please let me know.
Thanks

Answer 1

You can try this example (without Typescript for simplicity):
source file:
import { of } from 'rxjs';
const tempVolunteers = [
{ firstName: 'John', lastName: 'Smith', totalHoursLogged: 85 },
];
export const getAllVolunteers = of(tempVolunteers);
React app file:
import React, { Component } from 'react';
import {
getAllVolunteers,
} from '../RxJS';
class App extends Component {
state = {
list: [],
};
componentDidMount() {
getAllVolunteers.subscribe((item) => {
this.setState({
list: [...this.state.list, ...item],
});
});
}
render() {
return (
<div>
<ul>
{ this.state.list
.map(({ firstName, lastName, totalHoursLogged }) =>
(
<div key={lastName}>
{`${firstName} ${lastName} - ${totalHoursLogged}`}
</div>
),
)
}
</ul>
</div>
);
}
}
export default App;