reactjs - Pass value to TextInput onPress -

my component :

class textinputcomp extends component {   constructor(props){     super();     this.state = { thetext: '' }   }    submittext = (text) => {     alert.alert("text submitted!", text);   }    render() {     const rendata = this.props.people((data, index) => {       return (          <view key={index} style={styles.card}>             <text style={styles.names}> id: {data.id} - name: {data.name} </text>            <touchableopacity               onpress={()=>this.refs.mybox.focus()} >               <text>open</text>            </touchableopacity>          </view>             )         });  return (       <view style={mystyles1.container}>          {rendata}         <view>         <textinput           ref='mybox'           style={{height: 40}}            onchangetext={(thetext) => this.setstate({thetext})}         />           <touchableopacity             onpress = { () => this.submittext(this.state.thetext) }>                <text style = {styles.buttontext}> submit </text>             </touchableopacity>         </view>       </view>     );   } } 

i can show data {reddata} , focus on textinput when clicked on open. want pass value textinput. want pass data.name, when onpress on open, want data.name @ start of textinput can pass this.state.thetext.

how can achieve this? many thanks.

you can make textinput controlled. can pass value prop textinput this

<textinput   ref='mybox'   style={{height: 40}}    value={this.state.thetext}   onchangetext={(thetext) => this.setstate({thetext})}   /> 

now on focus, have set thetext state value want display in textinput this

<touchableopacity    onpress={()=>{this.refs.mybox.focus(); this.setstate({thetext: data.name})}} >    <text>open</text> </touchableopacity>