container.jsx

import React, { useState } from 'react';
import { render } from 'ink';
import Input from './components/input';

function Container() {

   // LOCAL STATE
   const [local, set_local] = useState({
      name: 'testing'
   })

   // UPDATE FIELD
   function update({ property, value }) {
      set_local({
         ...local,
         [property]: value
      })
   }

   return (
      <Input
         header={ 'Enter your query' }
         value={ local.name }
         placeholder={ 'something' }
         dispatch={ update }
         id={ 'name' }
      />
   )
}

render(<Container />)

input.jsx

import React, { Fragment } from 'react';
import { Box } from 'ink';
import TextInput from 'ink-select-input';

function Input({ header, value, placeholder, dispatch, id }) { return (
   <Fragment>
      <Box marginRight={ 1 }>{ header }:</Box>
      <TextInput
         value={ value }
         placeholder={ placeholder }
         onChange={
            query => dispatch({
               property: id,
               value: query
            })
         }
      />
   </Fragment>
)}

export default Input;