How to use onChange in custom textinput react native

Question

So im new at react native and i built an custom text input that gives suggestions by following a tutorial.But now i cant use onChange in that custom text input.I tried to create a state in App.js and change it in AutoCompleteText.js file but didnt worked.How can i get the value inmy custom text input ?

my App.js file :

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AutoCompleteText from './AutoCompleText'
import './AutoCompleteText.css';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.AutoComp}>
      <AutoCompleteText items={['Ali','Veli','Ahmet']} />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

  },
  AutoComp:{
    width:600

  }
});

my AutoCompleteText.js file

import React from 'react'
import './AutoCompleteText.css';

export default class AutoCompleteText extends React.Component{



    constructor(props){
        super(props);
        this.state={
            suggestions:[],
            text:'',
            
        };

    }


    onTextChanged = (e) =>{
        const {items} = this.props;
        const value = e.target.value;
        let suggestions = [];
        if (value.length > 0){
            const regex = new RegExp(`^${value}`,'i');
            suggestions = items.sort().filter(v => regex.test(v));
            
            
    }
    this.setState(() => ({ suggestions , text: value }));

}



    suggestionSelected(value){
        this.setState(() =>({
            text: value,
            suggestions:[],
        }) )

    }


    renderSuggestions(){

    const {suggestions} = this.state;
    if (suggestions.length === 0){

        return null;
    }
    return(
        <ul>
            {suggestions.map((item) => <li onClick={() => this.suggestionSelected(item)}>{item}</li>)}
        </ul>
    );
}




    render(){
        const { text } = this.state;
        return(
            <div className="AutoCompleteText">
                <input value={text} onChange={this.onTextChanged} type ='text'/>
                {this.renderSuggestions()}
             
            </div>


        )


    }
}

Shahid ali · Accepted Answer · 2021-03-06 18:34:13Z

3

hi Ülkü Tuncer Küçüktaş, You are writing the wrong syntax. You are mixing the syntax of react native with react. In react native for textinput, you should use the TextInput Component(Built in component from docs).

The syntax of react native TextInput look like below

    import React from 'react';
import { TextInput } from 'react-native';

const UselessTextInput = () => {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text => onChangeText(text)}
      value={value}
    />
  );
}

export default UselessTextInput;

answered Mar 6, 2021 at 18:34

Shahid ali

2442 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use onChange in custom textinput react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related