Two parameters inside onClick

Question

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()".

You should not change props from within a child component and === does not set a value but compares the two values.See @Dupocas answer for how to call 2 functions within the onClick handler. — Domino987, Aug 12 '19 at 20:09
Welcome to SO! Are you trying to change the value of `prop2` to become `prop1`? Can you elaborate on this ("the pro1 becomes the prop2")? — technogeek1995, Aug 12 '19 at 20:09
@Domino987 thanks. Did not workout though. I cannot use setState in this particular case. — Oblicion A, Aug 12 '19 at 20:55
@technogeek1995. Basically I need to push a value from a firebase collection and give that value to a state prop (on a parent component) — Oblicion A, Aug 12 '19 at 20:55
@Oblicion A what did not work excatly. You should pass a callback props to the child component to update that prop. That way, you don't mutate the props. — Domino987, Aug 12 '19 at 20:58
I posted an answer, but it'd be helpful to see more of your code/explanation to get an idea of what you're trying to accomplish. — technogeek1995, Aug 13 '19 at 13:18

score 3 · Answer 1 · answered Aug 12 '19 at 20:02

3

How about a function with multiple statements:

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

answered Aug 12 '19 at 20:02

Dupocas

20,285
6
38
56

I tried this already. I cannot use setState in this particular case :s – Oblicion A Aug 12 '19 at 20:29

score 1 · Answer 2 · answered Aug 12 '19 at 20:07

1

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} >
)

answered Aug 12 '19 at 20:07

cccn

929
1
8
20

it did not workout :( I guess I will have to share this page of code with someone :s – Oblicion A Aug 12 '19 at 20:53

score 0 · Answer 3 · answered Aug 13 '19 at 13:18

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>
  );
};

Two parameters inside onClick

3 Answers3

Linked