CODEWITHSUNDEEP
reactjsreact-native
Victorino
Victorino

Reputation: 1641

React pass more than one arguments to component

my English is not very good but i try to explain myself clear. I have two components - OrderInfo and OrderTopMenu inside OrderInfo. I pass through 2 arguments:

<OrderTopMenu args = {this.state.status} args2 = {this.state.user} />

inside the OrderTopMenu i pass trough arguments like this:

`export default class OrderTopMenu extends Component {
       constructor(args, args2) {

       super(args, args2);

        console.log(args)
        console.log(args2)

        this.state = {
          orderInfo: args.orderInfo,
          statuses: [],
          messages: [],
          contacts: [],
          chosenContacts: [],
          files: [],
          chosenFiles: [],
          message: '',
          message_target: '',
          status_id: args.status_id,
          ins_order: args.ins_order,
          ins_type:  args.ins_type,
          lack_claims_status: args.lack_claims_status,
          readonly: true,
          target_to_send: '',
          files_required: false,
          messageChosen: false,
          auth_user: args2,
          policies: {
              comprehensive_policy_number: '',
              compulsory_policy_number: '',
          }
      }

   }

`

The first args i'm getting correct, but second args i see only in console log inside the constructor on OrderTopMenu, but when i try to access them inside the function after onClick on button after component is mount i got undefined. Cant't figure out what is going wrong.

Upvotes: 1

Views: 2644

Answers (3)

Suraj Malviya
Suraj Malviya

Reputation: 3773

You should extract your arguments from props in the OrderTopMenu component.

Your code should be like this:

export default class OrderTopMenu extends Component {
       constructor(props) {

       super(props);

        console.log(props.args)
        console.log(props.args2)
       ......

Also from button click, you should be able to access the args from props using this.props.

onButtonClick = () => {
  const {args, args2} = this.props;
  console.log('argument :', args);
  console.log('argument 1:', args1);

}

Upvotes: 2

Alex Kang
Alex Kang

Reputation: 71

Component class constructor params is just receive props that given JSX props. So you should use props in constructor. Like this.

constructor(props) {
   super(props);
   let {args, args2} = props;

   console.log(args);
   console.log(args2);
}

OR you can use the distructring directly

constructor({args, args2}) { super({args, args2});

   console.log(args);
   console.log(args2);
}

Upvotes: 2

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

You need to pass props to the constructor and access your arguments as this.props.args and this.props.args2

export default class OrderTopMenu extends Component {
   constructor(props) {
   super(props);
    console.log(this.props.args);
    console.log(this.props.args2);

    this.state = {
      orderInfo: this.props.args.orderInfo,
      statuses: [],
      messages: [],
      contacts: [],
      chosenContacts: [],
      files: [],
      chosenFiles: [],
      message: '',
      message_target: '',
      status_id: args.status_id,
      ins_order: this.props.args.ins_order,
      ins_type:  this.props.args.ins_type,
      lack_claims_status: this.props.args.lack_claims_status,
      readonly: true,
      target_to_send: '',
      files_required: false,
      messageChosen: false,
      auth_user: this.props.args2,
      policies: {
          comprehensive_policy_number: '',
          compulsory_policy_number: '',
      }
  }

}

Upvotes: 2

Related Questions