[GH-ISSUE #161] Adding and removing React component to box as first child #103

New issue

Closed

opened 2026-05-05 11:42:28 -06:00 by gitea-mirror · 0 comments

gitea-mirror commented

2026-05-05 11:42:28 -06:00

Owner

Originally created by @mischnic on GitHub (Jun 21, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/161

Initial render (state.show == true - correct):

After clicking the button twice (state.show == true - wrong):

Works fine with {this.state.show && <TextInput />} instead of {this.state.show && <Example />}:

import React, { Component } from "react";
import { App, Window, render, Box, Button, TextInput, Text } from "proton-native";

class Example extends Component {
  render() {
    return (
      <Box padded>
        <TextInput />
        <Text>Test</Text>
      </Box>
    );
  }
}

class X extends Component {
  state = { show: true };

  render() {
    return (
      <App>
        <Window title="Notes" size={{ w: 500, h: 350 }} margined>
          <Box padded>
            {this.state.show && <Example />}
            <Button onClick={() => this.setState({ show: !this.state.show })}>
              Button
            </Button>
          </Box>
        </Window>
      </App>
    );
  }
}

render(<X />);

Originally created by @mischnic on GitHub (Jun 21, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/161 Initial render (`state.show == true` - correct): ![bildschirmfoto 2018-06-21 um 23 29 21](https://user-images.githubusercontent.com/4586894/41746549-07fb25d6-75ab-11e8-80bc-7eeb1ffd16ff.png) After clicking the button twice (`state.show == true` - **wrong**): ![bildschirmfoto 2018-06-21 um 23 29 27](https://user-images.githubusercontent.com/4586894/41746590-2663ecba-75ab-11e8-8732-9403ba374870.png) Works fine with `{this.state.show && <TextInput />}` instead of `{this.state.show && <Example />}`: ```jsx import React, { Component } from "react"; import { App, Window, render, Box, Button, TextInput, Text } from "proton-native"; class Example extends Component { render() { return ( <Box padded> <TextInput /> <Text>Test</Text> </Box> ); } } class X extends Component { state = { show: true }; render() { return ( <App> <Window title="Notes" size={{ w: 500, h: 350 }} margined> <Box padded> {this.state.show && <Example />} <Button onClick={() => this.setState({ show: !this.state.show })}> Button </Button> </Box> </Window> </App> ); } } render(<X />); ```