Switch view depending on button click

Question

I am new to react native.

My question is pretty simple: my screen contains 5 buttons. Each one opens the same < Modal > component. I need to dynamically change the content of the modal, depending on the button clicked.

For example:

if I click the first button, a text input will be shown into the modal.

If I click the second button, checkboxes will be shown into the modal.

Here's my modal :

<Modal
    visible={this.state.modalVisible}
    animationType={'slide'}
    onRequestClose={() => this.closeModal()}>
    <View style={style.modalContainer}>
        <View style={style.innerContainer}>
            <Text>This is content inside of modal component</Text>
            <Button
                onPress={() => this.closeModal()}
                title="Close modal"
            >
            </Button>
        </View>
    </View>
</Modal>

Here I open it :

openModal() {
    this.setState({ modalVisible: true });
}

Here I call the function (on button press) :

onPress={() => this.openModal()}

I've heard about using props/children, but I don't know how to use them is this case.

Can anyone please help ?

Answer 1

You should modify your Modal component so that it renders the base layout with space for dynamic content to be rendered. The content will be passed in as children, via Props. This will mean the modal is dynamic and will / should support future requirements. Try to avoid the switch case in the modal render suggestion unless you have very specific requirements that are unlikely to change in the future, or if you want to do things the React way.

Then for each variant of your Modal (TextInput, Checkbox etc.) create a new Component that wraps the Modal component and have each button initiate rendering the specific component.

If you're using Redux then you would be creating containers, connecting to Redux and passing dynamic state variables. You don't have to use Redux but the principle is the same.

Here's a very basic example to illustrate my point.

// Basic modal that renders dynamic content
const Modal = props => {
  const { children } = props;

  render (
    <View style={styles.modal} >
      {children}
    </View>
  );
}

// Specific modal implementation with TextInput
const ModalWithTextInput = props => (
  <Modal>
    <TextInput
      value={props.someValue}
    />
  </Modal>
)


// Specific modal implementation with Switch
const ModalWithSwitch = props => (
  <Modal>
    <Switch
      value={props.someValue}
    />
  </Modal>
)

Then in your component that launches the modals, do something like this...

class MyComponent extends Component {
  openTextModal = () => {
    this.setState({ modalType: 'text' });
  }

  openSwitchModal = () => {
    this.setState({ modalType: 'switch' });
  }

  renderModal = (type) => {
    if (type === 'text') {
      return(<ModalWithTextInput />)
    }

    if (type === 'switch') {
      return(<ModalWithSwitch />)
    }
  }

  render() {
    const { modalType } = this.state;

    render (
      <View>
        <View>
          <TouchableWithX onPress={this.openTextModal} />
          <TouchableWithX onPress={this.openSwitchModal} />
        </View>
        <View>
          {this.renderModal(modalType)}
        </View>
      </View>
    );
  }
}

Please note this code has not tested but the principle is sound.

Answer 2

Here is quick example to show who to render different content based on input you provide.

Modal Content

renderModalContent(type, data) {
  switch(type) {
    1: {
      return (
        <View>{..data}</View>
      )
    }
    2: {
      return (
        <Button>...</Button>
      )
    }
    default: (<CustomComponent data={data} />)
  }
}

Modal

<Modal>
  <View>
    {this.renderModalContent(this.state.type, this.state.modalContentData)}
  </View>
</Modal>

Here you decide which view you want to render and pass its data.

openModal() {
    this.setState({ modalVisible: true, type: 1, data: {...} });
}