Use Popup to display Input Error message in React-Semantic-UI

Question

It is possible to use the Popup Component to display the Input Errors in react Semantic UI?

Something like this

<Popup
  content="Error Message"
  trigger={
    <Input placeholder='Name' />
  }
/>

Answer 1

I think there is a way to achieve that, but not by using the PopUp component. To achieve that see the semantic-ui-react documentation on Forms with Label (pointing). You can use the logic illustrated in the code below:

import React, { Component } from 'react'
import { Form, Label, Input, Button } from 'semantic-ui-react'

export default class MyCustomForm extends Component {
  constructor(props){
    super(props)
  }
  this.state = {
    input1: 'some value',
    input2: '',
    errors: {
      input1: 'Input 1 error message'
    }
    this.onChange = this.onChange.bind(this)
    this.validate = this.validate.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }
  onChange(e, {name, value}){
     const state = this.state
     const { errors } = state
     if(errors[name]){ 
       delete errors[name] 
     }
     this.setState(Object.assign({},...state,{[name]: value, errors }))
     this.validate(name, value)
  }
  validate(name, value){
    {/*
       THIS SHOULD VALIDATE THE INPUT WITH THE APPROPRIATE NAME ATTRIBUTE
       AND UPDATE THE ERRORS ATTRIBUTE OF THE STATE
     */}
  }
  onSubmit(e){
     e.preventDefault()
     {/* CLEAR THE ERRORS OF THE STATE, SUBMIT FORM TO BACKEND, THENj RESET ERRORS IF ANY */} 
  }
  render() {
    <Form size='small' key='mycustomform'>

       <Form.Group>
         <Form.Field error={errors.input1} required>
           <label>Input1</label>
           <Input name='input1' onChange={this.onChange}/>
        {errors.input1 && <Label pointing color='red'>{errors.input1}</Label>}
        </Form.Field>
      </Form.Group>

      <Form.Group>
        <Form.Field error={errors.input2}>
          <label>Input2</label>
          <Input name='input2' onChange={this.onChange}/>
        {errors.input2 && <Label pointing color='red'>{errors.input2}</Label>}
       </Form.Field>
     </Form.Group>

     <Form.Field control={Button} onSubmit={this.onSubmit}/>
  </Form>
}