Dynamically add properties in React Native

Question

Let's say I have a component like this:

<TouchableOpacity activeOpacity={1} />

And in some cases I would like to add a property pointerEvents or something similar like so:

<TouchableOpacity pointerEvents={'box-none'} activeOpacity={1} />

Recently I have been accomplishing this by setting a variable and passing it to the component based on some internal state like so:

render() {
    const pointerType = this.state.isVisible ? 'box-none' : 'box-only';
    return (
       <TouchableOpacity pointerEvents={pointerType} activeOpacity={1} />
    )
}

However, in some cases this is not ideal and I was wondering if there was a way to dynamically include the property like so:

render() {
    const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
    return (
       <TouchableOpacity {pointerJSX} activeOpacity={1} />
    )
}

score 6 · Accepted Answer · 2018-07-30 23:28:18Z

Can your try this?

render() {
  const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
  return (
    <TouchableOpacity {...pointerJSX} activeOpacity={1} />
  )
}

Edit

I think it is better for me to explain a little bit so that you and other developers know what is happening in this problem.

Basically

const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;

means that pointerJSX variable is assigned based on the isVisible state. If isVisible is true, it will be assigned to an object of { pointerEvent: 'box-none' }, otherwise if it false then it is null

Then if you want to use it into a component, it will be just like this

<TouchableOpacity {...pointerJSX} activeOpacity={1} />

{...pointerJSX} in here means that it will assign the content of pointerJSX object into TouchableOpacity component. Then if the pointerJSX variable is null, it will not put any props into TouchableOpacity.

Hope it helps to explain this bit of code.

Collectives™ on Stack Overflow

Dynamically add properties in React Native

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