Update multiple components on props change in react js

What are Props?

The value of a tag's attributes is kept in the props type of object in ReactJs. The name "props" indicates "properties," and it functions pretty similarly to an HTML attribute. In essence, these props components are read-only components.

Here, I have created a component as shown in the above image.

`

    

        const Xyz = (props) => {
           return <>
           
                
                    {props.changeValue}

                
                
                    

{props.changeValue}

                
           
           
        }
    

`

As you can see, In the “Xyz” Component, I have taken a ⇒ and set its value with props.

Also taken a with inline CSS to separate tag.

Here I have written props.changevalue in tag, which means whatever value the ’. changeValue‘ gets that will be set over here.

And to get this value we need to import the ‘Xyz’ component into another component.

`

    
        import Xyz from "./Xyz";
        const Abc = (props) => {
           return <>
           
                
                    {props.textValue}

                
                
                    

{props.textValue}

                
           
           
           
        }
        export default Abc;
    

`

So here I have created one more component named Abc, and its code structure is the same as Xyz Component.

Here I Have only changed the tag value. And, I have passed props.textValue in tag, which means whatever the value will textValue gets that will be set over here.

And here, in the end, I have called the Xyz Component and defined the changeValue = {props.textValue}, which means whatever the value is going to be there in the textValue will be set in the changeValue and wherever Xyz changeValue is defined or called over there the value will be set

`

    

        import Abc from "./Abc";
        import "./Abc.css";
        function App() {
           return (
                
                    
                
           )
        }
        export default Abc;
    

`

The Abc Component, which we have created, I have called in App Component.

And I have set the textValue = {‘hello world’}, which means in the Abc component where we defined the textValue over there, ‘hello world’ is set.

And As soon as the textValue => value will be set, changeValue => value will also be set in the Xyz Component.

And here, I set the static value to the props as ‘hello world’. If you want to set the props value dynamic, then….

`

    

        import Abc from "./Abc";
        import "./Abc.css";
        import { useState } from "react";

        function App() {
            const [textValue, setTextValue] = useState('Hello world')
           return (
                
                    
                        {textValue}

                    
                    
                        
                    
                
                 setTextValue('Hi Developers')} style={{marginTop: '20px'}}>Change text value
           )
        }
        export default Abc;
    

`

As shown in the above images, we took a UseState and pre-defined a value as ‘hello world’, so wherever we define textValue and ChangeValue it’s going to set the value as ‘hello world’

And we have also created a button here, when the button is clicked it will replace the value of all the props on the click event.

We have set the value of our useState at the click of a button. As soon as the button is clicked, the value of the useState will be changed to ‘Hi Developers’. And this Value is going to reflect everywhere. If you are still confused on how to update multiple componenets on props, you can take help of a react js app development company who can assist you.