pass mobx observable data to props - reactjs

Using mobx in react-typescript project. This class set observable array with fetch api:
class MenuRepo {
#observable menuItems?: IMenuModel[];//=[{Id:1,itemName:"asd",childItems:[]}];
#action getItems(): void {
fetch(`...`)
.then((response: { value: IMenuModel[] }): void => {
this.menuItems = [
{ Id: 1, itemName: 'test-item1', childItems: [] }
];
});
}
and I want to track this observable data in this component class:
#observer
class Menu extends React.Component<{params?:IMenuModel[]}, {}> {
render() {
debugger
var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{
return (<li key={item.Id}>{item.itemName}</li>)
}):[];
return (...)
but params is "undefined". I watched some tutorials about mobx&react but couldnt solve it.
and here App.tsx file:
import menuCodes from './components/Codes';
class App extends React.Component<null, null> {
render() {
return (
<div className="App">
<Menu params = {asd.menuItems}/>
</div>
);
}
}
export default App;

is asd instanceof MenuRepo? Note that in the first render menuItems will be undefined, as it only get's it's first value after the fetch has resolved, which should produce the second rendering.
Note that App should be observer as that is the one dereferencing the menuItems observable. (For more info: https://mobx.js.org/best/react.html)

Related

Typescript spfx error: Property 'news' does not exist on type 'Readonly<{}>

I am trying to create an spfx react component that will display a rss feed to the browser. I have this working in a play ground, but spfx uses typescript and not sure how to combat the type error below.
RssFeed.ts
import * as React from 'react';
import styles from './RssFeed.module.scss';
import { IRssFeedProps } from './IRssFeedProps';
import { escape } from '#microsoft/sp-lodash-subset';
import * as $ from "jquery";
import { string } from 'prop-types';
export default class RssFeed extends React.Component<IRssFeedProps,
{}> {
constructor(props) {
super(props);
this.state = { news: [] };
}
componentDidMount() {
this.getNews();
}
getNews() {
$.get(
"https://www.feed.co.uk/news/feed",
function(data) {
var $xml = $(data);
var items = [];
$xml.find("item").each(function() {
var $this = $(this);
items.push({
title: $this.find("title").text(),
link: $this.find("link").text()
// link: $this.find("link").text(),
});
});
this.setState({ news: items }, function() {
// callback function to check what items going onto the array
console.log(this.state.news);
});
}.bind(this),
"xml"
);
}
public render(): React.ReactElement<IRssFeedProps> {
return (
<div className={ styles.rssFeed }>
{this.state.news.map(item => (
<div className="panel" key={item.title}>
<h2 className="panel-title">
{item.title}
</h2>
<span>{item.link}</span>
</div>
))}
</div>
);
}
}
IRssFeedProps.ts
export interface IRssFeedProps {
description: string;
}
This is the error:
Error - [tsc] src/webparts/rssFeed/components/RssFeed.tsx(47,25): error TS2339: Property 'news' does not exist on type 'Readonly<{}>'.
You are passing an empty interface for your component state.
interface ComponentProps{
firstProp: string;
}
interface ComponentState {
firstPropsOnState: string;
}
then you could use it like that
class MyComponent extends React.Component<ComponentProps, ComponentState> {...}
Since you are passing an empty interface TypeScript will complain that news property on state does not exist because you declared an empty state. Just add that property to your interface and pass it down when you create your component and it will work.
https://www.typescriptlang.org/docs/handbook/react-&-webpack.html#write-some-code
In the docs they don't have an expample of defined interface for the state which might be misleading for newcomers to TypeScript. The second generic type which you pass there is your actual state.
Hope it made things clear for you.
You need to add to typing of the state when creating the component:
interface IRssFeedState { news: any[] };
class RssFeed extends React.Component<IRssFeedProps, IRssFeedState> {
...
}
Also, you should normally have a well defined type other than any.

React/TypeScript: Creating a unified "notification" function that ties to a single component

I am trying to design my app so that all notifications tie in to a single "snackbar" style component (I'm using the material UI snackbar component) that wraps the app:
example
class App extends React.Component {
public render() {
return (
<MySnackbar >
<App />
<MySnackbar />
}
}
truncated example snackbar class:
class MySnackbar extends React.Component<object, State> {
public state = {
currentMessage: { message: "", key: 0},
open: false
};
private messageQueue = [];
public openAlert = (message: string) => {
this.queue.push({ key: new Date().getTime(), message})
if (!this.state.open) {
this.setState({ open: true });
}
}
// other class methods...
public render () {
// render component here...
}
}
I am trying to figure out how I can make it so that I can simply export a function that when called, has access to the "openAlert" function referencing the parent snackbar.
hypothetical child component:
import notificationFunction from "MySnackbar";
class Child extends React.Component {
public notifyUser = () => {
notificationFunction("Hi user!")
}
}
I know there are libraries that do this, but its important for me to understand how they work before I use one. I have seen a few examples using global state (redux, react-context), but I'm looking to avoid using global state for this.
I have tried following some guides on creating HOC patterns, but I can't seem to design something that works how I want this to work. Is what I'm trying to do even technically possible? I know that I could make this work by passing the function down to every child as a prop, but that requires adding a field to every single interface and intermediate component, and is not very DRY.
Stable React's way of doing that is Context (https://reactjs.org/docs/context.html).
interface IContext {
updateMessage: (newMessage: string) => void;
}
interface IProps {}
interface IState {
message: string;
}
const SnackbarContext = React.createContext<IContext>({
updateMessage: () => {},
});
class Snackbar extends React.Component<IProps, Partial<IState>> {
constructor(props) {
super(props);
this.state = {
message: "",
};
this.updateMessage = this.updateMessage.bind(this);
}
render() {
return (
<SnackbarContext.Provider value={{ updateMessage: this.updateMessage }}>
<div>
<strong>MESSAGE:</strong> {this.state.message}
</div>
<hr />
{this.props.children}
</SnackbarContext.Provider>
);
}
updateMessage(newMessage: string) {
this.setState({ message: newMessage });
}
}
class Child extends React.Component {
static contextType: React.Context<IContext> = SnackbarContext;
context: IContext;
constructor(props) {
super(props);
this.onButtonClick = this.onButtonClick.bind(this);
}
render() {
return (
<div>
<button onClick={this.onButtonClick}>Create message</button>
</div>
);
}
onButtonClick() {
this.context.updateMessage(`Message with random number at the end ${Math.random()}`);
}
}
<Snackbar>
<Child />
</Snackbar>
There is also hooks experiment (https://reactjs.org/docs/hooks-intro.html) which may or may not be a future.
I have tried following some guides on creating HOC patterns, but I can't seem to design something
HOC will not work here. Or all JSX.Elements will need to be wrapped in HOC. And it is more easy to pass callback function down the whole element tree instead of using HOCs.

Sharing store change event between same hierarchical level child components

I am developing a simple React JS application for learning purpose. I just started learning React JS a few days ago. Now, I am having a problem with Flux Store. I need to share the change event across two child components on the same hierarchical level.
I have the parent component, called TodoComponent with the following definition
//Create
class TodoComponent extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<div>
<ListComponent />
</div>
<AddItemComponent />
</div>
)
}
}
It has two child components called, ListComponent and the AddItemComponent. Moreover, I have a store with this definition.
import { EventEmitter } from 'events';
class DataStore extends EventEmitter{
constructor()
{
super();
this.todos = [
"Eat",
"Sleep",
"Die",
"Shower"
];
}
getAll(){
return this.todos;
}
addItem(newItem)
{
this.todos.push(newItem);
this.emit("change")
}
}
const dataStore = new DataStore;
export default dataStore;
It has a function for adding new item into the array and a function for fetching the array.
This is the ListComponent that is displaying the array of items from the DataStore flux store.
import React from 'react';
import TodoItem from './TodoItem';
import DataStore from './data.store';
class ListComponent extends React.Component{
constructor(props)
{
super(props)
this.state = { todos : DataStore.getAll() };
}
componentWillMount(){
DataStore.on('change', () => {
//do somethif
this.state = { todos : DataStore.getAll() };
})
}
render()
{
var deleteItem = (item) => {
this.deleteItem(item);
}
var editItem = (item) => {
this.editItem(item);
}
var addItem = (newItem) => {
this.addItem(newItem);
}
var todos = this.state.todos.map((item, index) => {
return (
<TodoItem item={item} addItem={addItem.bind(this)} deleteItem={deleteItem} editItem={editItem} />
)
});
return (
<ul>
{todos}
</ul>
)
}
deleteItem(item)
{
this.setState({ todos: this.state.todos.filter((listItem, index) => {
return listItem !== item;
}) });
}
editItem(item)
{
alert(item)
}
addItem(newItem)
{
DataStore.addItem(newItem);
}
}
module.exports = ListComponent;
It is updating the items in the change event of the DataStore store. But I am not calling the addItem function in the ListComponent. I am calling it in the AddItemComponent.
This is the definition of the AddItemComponent.
import React from 'react';
import DataStore from './data.store';
class AddItemComponent extends React.Component{
constructor(props)
{
super(props)
}
render()
{
return (
<form id="form-todo" onSubmit={this.addItem.bind(this)} action="post">
<input type='text' ref="newItem" />
<button>ADD</button>
</form>
);
}
addItem(e)
{
e.preventDefault();
DataStore.addItem(this.refs.newItem.value);
}
}
module.exports = AddItemComponent;
But when I trigger the addItem function in the AddItemComponent, the change event of the DataStore in the ListComponent is not triggered. Therefore, how can I synchronize the change event of Flux Store between two components exist on the same hierarchical level?
The solution I can think of is having the DataStore in the TodoComponent (parent component) and send the data and functions as props to the child component. I think, the code will become a bit messy in that way. Is that the only solution to do that?
Welcome to React! I recreated your example and your "change" event is firing in ListComponent, but to update the state in a component you should use this.setState(changes) rather than this.state = {changes}. Only use this.state = {} in the constructor to set the initial state. The setState method properly flows through the React lifecycle and causes the component to re-render using the new state. There is an official guide on React's state and lifecycle hooks here.

Passing a component into React setState value

I've got a Meteor app using React. I've added Session variables and want to pass the new Session value (which will be another React component) into another react component.
The user will click the p-tag in the SideNav and reset the Session to a React component.
SideNav component:
import React from 'react';
import { Session } from 'meteor/session';
import SonataContent from './sonata-content';
export default () => {
injectSonataText = () => {
const sonataContent = <SonataContent/>;
Session.set('MainContent', sonataContent); /* Set Session value to component */
};
return (
<div className="side-nav">
<h2>Explore</h2>
<p onClick={this.injectSonataText.bind(this)}><i className="material-icons">child_care</i><span> Sonatas</span></p>
</div>
)
}
In the MainWindow, Tracker.autorun re-runs and sets the state to the component and renders the new state value.
Main Window component:
import React from 'react';
import { Session } from 'meteor/session';
import { Tracker } from 'meteor/tracker';
export default class MainWindow extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ""
}
}
componentDidMount() {
this.mainWindowTracker = Tracker.autorun(() => {
const text = Session.get('MainContent');
this.setState({text: text});
});
}
componentWillUnmount() {
this.mainWindowTracker.stop();
}
render() {
return (
<p>{this.state.text}</p>
)
}
}
I'm getting an error "Invariant Violation: Objects are not valid as a React child". Is this caused by the component being used in setState? Is there a way to do this?
Session set function accepts as a value EJSON-able Object which I think may not work with React Object.
However I would try (only a guess though):
injectSonataText = () => {
Session.set('MainContent', SonataContent); /* Set Session value to component */
};
...
export default class MainWindow extends React.Component {
constructor(props) {
super(props);
this.state = {
Component: null,
}
}
componentDidMount() {
this.mainWindowTracker = Tracker.autorun(() => {
const MainContent = Session.get('MainContent');
this.setState({Component: MainContent});
});
}
componentWillUnmount() {
this.mainWindowTracker.stop();
}
render() {
const { Component } = this.state;
return (
<p>
{
Component && <Component />
}
</p>
)
}
}

render method not triggered with observable array update

Data loading with fetch method in Repo class fine, but I couldnt pass it component, actually I expect it to re-render of observer component but its not happenning. Here they are;
MenuComponent.tsx:
#observer
#inject('params')
class MenuComponent extends React.Component<{params?:IMenuModel[]}, {}> {
render() {
//params undefined.
var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{
return (<li key={item.Id}>{item.itemName}</li>)
}):[];
return render(){...}
MenuRepo.tsx:
class MenuRepo {
#observable menuItems?: IMenuModel[];
constructor() {
this.getItems();
}
#action getItems(): void {
fetch(`..`).then((response: Response): Promise<{ value: IMenuModel[] }> => {
this.menuItems = [
{ Id: 1, itemName: 'test-item1', childItems: [] }
];//property setted here..
})
}
}
export default new MenuRepo;
App.tsx;
import Menu from './components/MenuComponent';
import menuCodes from './components/MenuRepo';
class App extends React.Component<null, null> {
render() {
return (
<div className="App">
<Menu params = {menuCodes.menuItems}/>
</div>
);
}
}
export default App;
I checked execution order, jsx render method not re-render after setting observerable field(menuItems) in fetch.
try reversing the order here...from this
#observer
#inject('params')
to this...
#inject('params')
#observer
from documentation: When using both #inject and #observer, make sure to apply them in the correct order: observer should be the inner decorator, inject the outer. There might be additional decorators in between.

Resources