CODEWITHSUNDEEP
reactjs
Oblicion A
Oblicion A

Reputation: 187

Two parameters inside onClick

I am trying to pass a two-event action on onClick in ReactJs Basically I wanted something like

<div className="botao shadow-drop-center col xl12 l12 m12 s12" onClick={(prop1.value1 === prop2.value2), this.continue(project)} >

I tried 1000 different ways of writing the syntax

<div className="botao shadow-drop-center col xl12 l12 m12 s12" onClick={(prop1.value1 === prop2.value2), this.continue(project)} >

My expected results are that when the user clicks on the button, that the pro1 becomes the prop2 and at the same time does "this.continue()".

Upvotes: 2

Views: 513

Answers (3)

technogeek1995
technogeek1995

Reputation: 3444

Based on your question, this is my best guess at what you're looking for. Essentially, you want to be able to control your parent's state in your child component. Props are immutable (more on that). Therefore, you cannot set your props equal to one another in your child component. You need to call a function in your parent component to set the value of the state in the parent component. When the parent component gets the new state, the child component will be re-rendered with the new value. If you want to also execute a function when with your onClick handler, you need to create a wrapping function to do both actions at the same time.

// Parent Component
class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { value1: '', value2: '' };

  }

  continue() {
    // do work
  }

  setPropValue1 = (value) => {
    const state = { ...this.state };
    state.value1 = value;
    this.setState(state);
  }


  render () {
    return (
      <Child 
        continue={this.continue}
        value1={props.value1}
        setPropValue1={this.setPropValue1}
        value2={props.value2}
      />
    );
  }
};



// Child Component
const Child = (props) => {

  const wrappingClickHandler = e => {
    props.setPropValue1(value2)
    props.continue(project);
  };

  return (
    <div
      className="botao shadow-drop-center col xl12 l12 m12 s12"
      onClick={wrappingClickHandler}
    >
        {props.value1}
    </div>
  );
};

Upvotes: 0

cccn
cccn

Reputation: 949

Try this:

function handleClick () {
prop1.value1 = prop2.value2
this.continue(project)
}

return (
<div className="botao shadow-drop-center col xl12 l12 m12 s12" onClick={handleClick} >
)

Upvotes: 1

Dupocas
Dupocas

Reputation: 21317

How about a function with multiple statements:

onClick={() => {
    setProp1(prop2)
    this.continue()
}}

Upvotes: 3

Related Questions