How to setState View style width to be +1 and height to be +1 in react native?

Question

i want this box(View) in style width and height +1

i not write style={{width:{{this.state.w}},height{{this.state.h}},backgroundColor:'blue'}}

export default class App extends Component { 

constructor(props){ 
 super(props); 
  this.state = { 
    w: 50, 
    h: 50, 
  } 
 } 

_addBox(){ 

  this.setState ({ 
      w:this.state.w + 1, 
      h:this.state.h + 1 
  });
}


 render() { 
  return ( 
  <view> 
   <view style="{{{styles.box}}}"> 
    <view style{{width:xxxx,height:xxxx,backgroundcolor:'blue'}}> 
     <text style="{styles.box}">
      {this.state.w}
     </text> 
    </view> 
    <buttontitle="add box"="" onpress="{this._addBox.bind(this)}" /> 
   </view> 
  </view> 
);
} 
}

help me :(

Hi! Please take the tour (you get a badge!), have a look around, and read through the help center, in particular How do I ask a good question? I also recommend Jon Skeet's Writing the Perfect Question and Question Checklist. It's not at all clear what you're asking here. — T.J. Crowder
When you were asking your question, there was a big orange How to Format box to the right of the text area with useful info in it. There was also a toolbar full of formatting aids. And a [?] button giving help. And a preview area showing what your post would look like when posted, located between the text area and the Post Your Question button (so that you'd have to scroll past it to find the button, to encourage you to look at it). Making your post clear, and demonstrating that you took the time to do so, improves your chances of getting good answers. (I've fixed it for you.) — T.J. Crowder

Muhammed B. Aydemir Muhammed B. Aydemir · Accepted Answer · 2019-11-07T08:30:05

If you use the state in setState then the recommended way is:

_addBox = () => {
    this.setState(prevState => ({
        w: prevState.w + 1,
        h: prevState.h + 1
    }))
}

And in your render function just use your state:

render() {
    const { w, h } = this.state
    return (
        <View>
            <View style={styles.box}>
                <View style={{ width: w, height: h, backgroundColor: 'blue' }}>
                    <Text style={styles.box}>{w}</Text>
                </View>
                <Button title="add box" onPress="{this._addBox}" />
            </View>
        </View>
    )
}

How to setState View style width to be +1 and height to be +1 in react native?

1 Answers