binding input to variable inside a React Dumb Component with MobX

Question

While learning to use MobX I wanted to update a string from an <input/>. I know that in Smart Components I can just use onChange={this.variable.bind(this)}, but I don't understand how I can do so in the following scenario:

const dumbComponent = observer(({ prop }) => {

  // prop is an object
  // destruct1 is a string, destruct2 is an array
  const { destruct1, destruct2 } = prop;
  const list = destruct2.map((item, key) => (<li key={key} >{item}</li>));

  return (
    <div>
      <h1>title</h1>
      <h2>{destruct1}</h2>
      // Relevent part start
      <input classname="destruct" value={destruct1.bind(this)} />
      // Relevent part end
      <ul>{list}</ul>
    </div>
  );
});

export default TodoList;

Can I bind the value of input to destruct somehow? Obviously, this code doesn't work. But I don't know what to do.

Tholle · Accepted Answer · 2018-06-11 15:05:44Z

1

You could create an inline arrow function and alter the prop.destruct1 like this:

const dumbComponent = observer(({ prop }) => {
  const { destruct1, destruct2 } = prop;
  const list = destruct2.map((item, key) => <li key={key}>{item}</li>);

  return (
    <div>
      <h1>title</h1>
      <h2>{destruct1}</h2>
      <input
        classname="destruct"
        value={destruct1}
        onChange={e => prop.destruct1 = e.target.value}
      />
      <ul>{list}</ul>
    </div>
  );
});

answered Jun 11, 2018 at 15:05

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

binding input to variable inside a React Dumb Component with MobX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related