CODEWITHSUNDEEP
javascriptreactjsreact-native
Ülkü Tuncer Küçüktaş
Ülkü Tuncer Küçüktaş

Reputation: 13

How to use onChange in custom textinput react native

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>


        )


    }
}

Upvotes: 1

Views: 2942

Answers (1)

Shahid ali
Shahid ali

Reputation: 256

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;

Upvotes: 3

Related Questions