Numerous NativeBase icons in InputGroup

Question

I am trying to create InputGroupone that has two icons, one icon and one button.

A single icon should be used to check if the input field is empty or not (this works). Another button of the OR icon should be used to “insert” some text into the field Input.

Currently my code is as follows:

import React, { Component } from 'react'
import { Content, List, InputGroup, Input, Icon, Button } from 'native-base'
export default class AddEquipment extends Component {
  constructor(props) {
    super(props)

    this.state = {
      parameters:  {
        one: {value:"", hint: "One"},
        two: {value:"", hint: "Two"},
        three: {value:"Valid", hint: "Three"}
      }
    }

    this.updateParameter = this.updateParameter.bind(this)
    this.validationStyle = this.validationStyle.bind(this)
  }

  componentDidMount() {

  }

  updateParameter(key, value) {
    newState = {...this.state}
    newState.parameters[key].value = value
    this.setState = newState;
  }

  validationStyle(text) {
    color = text === "" ? "#b03939" : "#649370"
    return (
      { marginRight:25, color
      }
    )
  }

  render () {
    return (
      <Content>
        { Object
          .keys(this.state.parameters)
          .map( key =>
            <InputGroup
              key={`${key}_InputGroup`}
              iconRight
              borderType='regular'
              style={{margin:5}}
              >

              <Input
                placeholder={this.state.parameters[key].hint}
                onChangeText={(text) => {
                  console.log(this.state.parameters)
                  this.updateParameter(key, text)} }
                value={key.value}
              />

              <Icon
                key={`${key}_validIcon`}
                name={ this.state.parameters[key].value === "" ? 'ios-alert' : 'ios-checkmark-circle'}
                style={ this.validationStyle(this.state.parameters[key].value) }
              />

              <Icon
                key={`${key}_injectNA`}
                name='ios-beer'
                onPress={() => this.updateParameter(key, "Cheers!") }/>

            </InputGroup>
          )
        }
      </Content>
    )
  }
}

Which gives me the following result

First edition

As you can see, I had problems with the appearance of another icon - it does not seem to lie behind the first one.

The button will be just as good, but it always drops below Input, and not next to it. Styling is not my strongest style - so why am I using the amazing NativeBase framework

Second issue

, state. , style .

Answer 1

? InputGroup : , . .

, , React this.setState(newState), .

key.value, - ( ), , . this.state.parameters [key]

( ):

import React, { Component } from 'react'
import { Content, List, InputGroup, Input, Icon, Button } from 'native-base'

const errorStyle = {color: "#b03939"}
const validStyle = {color: "#649370"}

export default class AddEquipment extends Component {
  constructor(props) {
    super(props)

    this.state = {
      parameters:  {
        one: {value:"", hint: "One"},
        two: {value:"", hint: "Two"},
        three: {value:"Valid", hint: "Three"}
      }
    }

    this.updateParameter = this.updateParameter.bind(this)
  }

  componentDidMount() {

  }

  updateParameter(key, value) {
    let newState = {...this.state}
    newState.parameters[key].value = value
    this.setState(newState);
  }

  static validationStyle(text) {
    return text === "" ? errorStyle : validStyle;
  }

  render () {
    return (
      <Content>
        { Object
          .keys(this.state.parameters)
          .map( key =>
            <InputGroup
              key={`${key}_InputGroup`}
              borderType='regular'
              style={{margin:5}}
              >

              <Icon
                  key={`${key}_validIcon`}
                  name={ this.state.parameters[key].value === "" ? 'ios-alert' : 'ios-checkmark-circle'}
                  style={ AddEquipment.validationStyle(this.state.parameters[key].value) }
                />

              <Input
                placeholder={this.state.parameters[key].hint}
                onChangeText={(text) => {
                  console.log(this.state.parameters)
                  this.updateParameter(key, text)} }
                value={this.state.parameters[key].value}
              />

              <Icon
                key={`${key}_injectNA`}
                name='ios-beer'
                onPress={() => this.updateParameter(key, "Cheers!") }/>

            </InputGroup>

          )
        }
      </Content>
    )
  }
}