Component communication - React JS

Question

How to make state change from outside of class or from prop.SomeFunction () ? I use typescript in combination. Yes i already have the class :

CLASS :

import * as React from "react";
import { Label } from "../../components/label/label";
import { TextBox } from "../../components/textBox/textBox";
import IApp from "../../interfaces/global-interfaces";
import { myStyle } from "./style";

interface HeaderI {
    background: string;
    myFunc(): void;
    // elements: any[];
    // add(id: number, content: any, event: any): void;
}

interface HeaderStateI extends IApp.ElementI {
    background: string;
    elements: any[];
}

export class Header extends React.Component< HeaderI, HeaderStateI , any > {

    public myRef: React.RefObject<Label>;

    constructor(args: any) {
        super(args);
        this.state = { enabledComponent : true,
                       visibility: true,
                       debugView: false,
                       background: args.background,
                       elements: [],
                    };

        this.myRef = React.createRef();
        this.add = this.add.bind(this);

        console.log("state elements:" , this.state.elements);
    }

    public test() {
       alert("Y click on header element");
    }

    public printMe() {
      console.log("Layout Header is active :");
    }

    //  setText = (e: React.ChangeEvent) => {

      // this.setState ( { enabledComponent : true , background :  (e.target as HTMLInputElement).value } );

    // }

    public render() {

        if ( this.state.debugView === false ) {

            return (
                <div style={myStyle} onClick={this.addN} >
                <Label name="headerName" text="i am header paragraph!" />
                {this.state.elements.map((i: any) => {
                  return <span key={i} >{i}</span>;
                })}
                </div>
              );

        } else {

            this.printMe();

            return (
                <div style={myStyle} >
                <Label ref={this.myRef} name="headerName" text="i am header paragraph!"/>
                {this.state.elements.map((i: any) => {
                   return <li key={i} >{i}</li>;
                })}
                </div>
              );

        }

    }

    public componentDidUpdate(prevProps: any) {

        // Typical usage (don't forget to compare props):
        console.warn("prevProps name is: " + prevProps.name);
        if (this.props.background !== prevProps.background) {
          this.printMe();
        } else {
            console.log("Background is same no update.");
        }

    }

    public add = (id: number, content: any, event: any ) => {

        this.setState(
          {
            elements: [React.createElement("div", { key: 2 , onclick : null }, "tyest 12")],
            visibility : false,
          },
        );

        // tslint:disable-next-line:no-unused-expression
        console.log(" add from class in state elements,  visible is " , this.state.visibility );

    }

    public addN(event: MouseEvent | Event) {

        this.setState(
            {
              elements: [React.createElement("div", { key: 2 , onclick : null }, "tyest 12")],
              visibility : false,
            },
          );
        // tslint:disable-next-line:no-unused-expression
        console.log(" add from class in state elements,  visible is NNNN " , this.state.visibility );
    }

}

MAIN FILE :

const AddNewElement = Services.addNewElement;
const collectMe = <Header background="#127654"/>;

ReactDOM.render(
    <>
    {collectMe}
    <h3>Page title - inline text only example </h3>
     <Title name="title" text="Hello react title" />
     <Label name="root" text="I am text label component!"/> <br/>
     <TextBox name="root" text="I am textBox component!"/>
    </>,
    document.getElementById("root"),
);

// This space is already out of class so why i can't change it ???

collectMe.props.background = "#121212";
console.log(collectMe.props);

There is lot of problem with react js. In this post there's methods but still not working for me : https://www.javascriptstuff.com/component-communication/#2-instance-methods

But examples are too pure with out args passing etc... Is it react just a commercial puffed-up project.

Using callbacks you can modify the parent component state in react — Hemadri Dasari, Sep 04 '18 at 07:52

Bhojendra Rauniyar · Answer 1 · 2018-09-04T08:05:51.357

2

props are read-only.

Whether you declare a component as a function or a class, it must never modify its own props.

What you need to do here is to use state. And to use state, you need to have class based component. Then, you can update the parent component state from child component using a callback function.

Take a look at this post to update the parent state from child component.

edited Sep 04 '18 at 08:05

answered Sep 04 '18 at 07:59

Bhojendra Rauniyar

83,432
35
168
231

"A component cannot update its own props unless they are arrays or objects (having a component update its own props even if possible is an anti-pattern), but can update its state and the props of its children." I found this from : https://stackoverflow.com/questions/24939623/can-i-update-a-components-props-in-react-js. .... – Nikola Lukic Sep 04 '18 at 08:47
Look like every right side var in constructor become readonly. I fixed with one more class property who's have no connection in constructor with state. – Nikola Lukic Sep 05 '18 at 11:32

Component communication - React JS

1 Answers1