not getting suggestions when used this library with class component

[HTEN1998]

I am using "react-native": "0.61.5" and when I used this library with class component RenderSuggestions is not getting called.
Can u give me an example of how to use this library with class component

[dabakovich]

Did you try something like this?

<MentionInput
  value={value}
  onChange={setValue}

  partTypes={[
    {
      trigger: '@',
      renderSuggestions: (props) => <YourClassComponent {...props} />,
      textStyle: {fontWeight: 'bold', color: 'blue'},
    },
  ]}
/>

[HTEN1998]

import * as React from 'react';
import { FC, useState, Component } from 'react';
import { Pressable, SafeAreaView, Text, View } from 'react-native';
import { MentionInput, MentionSuggestionsProps, Suggestion } from 'react-native-controlled-mentions';
import Axios from 'react-native-axios';

const users = [
{id: '1', name: 'David Tabaka'},
{id: '2', name: 'Mary'},
{id: '3', name: 'Tony'},
{id: '4', name: 'Mike'},
{id: '5', name: 'harish'},
];

const renderSuggestions1: (suggestions: Suggestion[]) => FC = (suggestions) => (
{keyword, onSuggestionPress},
) => {

if (keyword == null || keyword.length<3) {
return null;
}
else{

    return (
      <View>
        {suggestions
          .filter(one => one.fullname.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
          .map(one => (
            <Pressable
              key={one.id}
              onPress={() => onSuggestionPress(one)}
  
              style={{padding: 12,backgroundColor:'cyan'}}
            >
              <Text>{one.name}</Text>
            </Pressable>
          ))
        }
      </View>
    );

}

};

class App extends Component {

constructor(props){
super(props);
this.state = {
inputText:""
}
}

render(){
return(

<MentionInput
value = {this.state.inputText}
onChange = {(input) => this.setState({inputText:input})}
placeholder = "Type here.."
style = {{padding:12}}
partTypes = {[
{
trigger:'@',
renderSuggestions: renderSuggestions(users),
},
{
pattern: /(https?://|www.)[-a-zA-Z0-9@:%.+~#=]{1,256}.(xn--)?[a-z0-9-]{2,20}\b([-a-zA-Z0-9@:%+[],.#?&/=]*[-a-zA-Z0-9@:%_+]#?&/=])*/gi,
textStyle: {color: 'blue'},
}
]}
/>

);
}
};

export default App;

I tried in this mannner

[dabakovich]

@HTEN1998 I see on your code renderSuggestions1 but you trying to call renderSuggestions. Is it expected?

[HTEN1998]

sorry that was a typing mistake, but in code, I was using it as renderSuggestions, can u tell if I m doing that in correct way?

[dabakovich]

It looks like it should work. What error are you getting? Where users variable defined?

[HTEN1998]

I m not getting any error, users variable is defined as a global variable at the top.

const users = [
{id: '1', name: 'David Tabaka'},
{id: '2', name: 'Mary'},
{id: '3', name: 'Tony'},
{id: '4', name: 'Mike'},
{id: '5', name: 'harish'},
];

[dabakovich]

Ok, first of all, it shouldn't appear until you will type at least 3 characters due to the keyword.length<3 condition. Or you should remove that condition. Also, you are trying to read fullname that is not present in the users list.

[dabakovich]

@HTEN1998, do you have any other questions?

[HTEN1998]

Yes, currently I m getting suggestions from this library, but I need to make an API call if keyword.length < 3. But before the API call gets finishes, the return statement gets executed

I am trying in this way:

const users = [];

const renderSuggestions: (suggestions: Suggestion[]) => FC = (suggestions) => (
{keyword, onSuggestionPress},
) => {

if (keyword == null || keyword.length<3) {
return null;
}
else{

apiCallingFunction();

return (
  <View>
        {suggestions
          .filter(one => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
          .map(one => (
            <TouchableOpacity key={one.id} onPress={() => onSuggestionPress(one)}>
              <Text>{one.name}</Text>
            </TouchableOpacity>
            
          ))
        }
      </View>
    );

}

};

and I m using Axios library

[dabakovich]

You can investigate React hooks, especially useState and useEffect hooks.
Then users state will be like:

const [users, setUsers] = useState([]);

useEffect(() => {
  if (keyword == null || keyword.length<3) {
    setUsers([]);
    return;
  }

  apiCallingFunction().then(newUsers => setUsers(newUsers));
}, [keyword]);

[dabakovich]

@HTEN1998 do you have some good news on that?

[HTEN1998]

@dabakovich sorry for delayed response, your suggestion worked for me. Thanks a lot

[dabakovich]

Great, going to close the ticket. Feel free to re-open it if you will get any other questions.

[ricardopacheco]

You can investigate React hooks, especially useState and useEffect hooks.
Then users state will be like:

const [users, setUsers] = useState([]);

useEffect(() => {
  if (keyword == null || keyword.length<3) {
    setUsers([]);
    return;
  }

  apiCallingFunction().then(newUsers => setUsers(newUsers));
}, [keyword]);

@dabakovich I try this and generate warning in development:

Warning: Cannot update a component (`MainEditor`) while rendering a different component (`MentionInput`). To locate the bad setState() call inside `MentionInput`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

[shahchirag2110]

@dabakovich @ricardopacheco @HTEN1998 are you guys solve this issue with class component?

[HTEN1998]

`

const renderSuggestions = ({keyword}) => {
    if (keyword === null) {
        return null;
    }
    const suggestionArrayToRender = sugesstions.filter(item => item.name.includes(keyword));
    return (
        <FlatList
            data={suggestionArrayToRender}
            renderItem={renderSugesstionPopup}
        />
    );
};

render() {
    return (
        <MentionInput
            value={value}
            onChange={setValue}
            partTypes={[
            {
                trigger: '@',
                renderSuggestions,
                textStyle: {color: 'blue'},
            },
            ]}
        />
    );
};

`
This way I implemented, in class component as it is similar to one which is give in documentation, in this i am rendering suggestion UI in seperate function called renderSugesstionPopup()