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
– Hemadri Dasari, Commented Sep 4, 2018 at 7:52

Bhojendra Rauniyar · Accepted Answer · 2018-09-04 08:05:51Z

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 4, 2018 at 8:05

answered Sep 4, 2018 at 7:59

Bhojendra Rauniyar

86k36 gold badges179 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikola Lukic Over a year ago

"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 : stackoverflow.com/questions/24939623/…. ....

Nikola Lukic Over a year ago

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.

Collectives™ on Stack Overflow

Component communication - React JS

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related