React props wont change manually, how to get around restrictions?

Question

When the component renders it has some children components and when i log props in the formgroup it looks like what's below. {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}

import React from 'react';

class FormGroup extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      value: {}
    }
  }

  setValue() {
    //do nothing at the moment
  }
  render() {
    return (<div className="formGroup" > 
    {
        this.props.children.map(child => {
          child.props.setValue = this.setValue;
          console.log('child', child)
          // does not change  
          return child;
        })
      }
     </div>)
      }
    };
      export default FormGroup;

I think you can check on [this](https://stackoverflow.com/a/49497934/11125492) answer. You probably need to use React Children API to manipulate children's props. — junwen-k, Nov 14 '22 at 01:44
thank you thats what i needed sort of React.Children.map(children, function[(thisArg)]) https://reactjs.org/docs/react-api.html#reactchildren — Grant mitchell, Nov 14 '22 at 02:00

score 1 · Accepted Answer · answered Nov 14 '22 at 01:51

You can utilize React Children and cloneElement API to manipulate children's props.

import React from 'react';

class FormGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {},
    };
  }

  setValue() {
    //do nothing at the moment
  }

  render() {
    const { children } = this.props;
    return (
      <div className="formGroup">
        {React.Children.map(children, (child) =>
          React.cloneElement(child, {
            ...child.props,
            setValue: this.setValue,
          })
        )}
      </div>
    );
  }
}
export default FormGroup;

React props wont change manually, how to get around restrictions?

1 Answers1