ReferenceError: Can't find variable: films in Autocomplete - react-native

Question

I need to use an autocomplete in my app,
I'm using this library because it was the only one I found
https://www.npmjs.com/package/react-native-autocomplete-input
and this way it is working.
import React, { Component } from 'react';
import Autocomplete from 'react-native-autocomplete-input';
export default class Registrar extends Component{
state = {
films: [],
query: '',
}
componentDidMount() {
const json = require('../assets/json/titles.json');
const { results: films } = json;
this.setState({ films });
}
findFilm(query) {
if (query === '') {
return [];
}
const { films } = this.state;
const regex = new RegExp(`${query.trim()}`, 'i');
return films.filter(film => film.title.search(regex) >= 0);
}
render() {
const { query } = this.state;
const films = this.findFilm(query);
const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();
return(
<Autocomplete
autoCapitalize="none"
style={styles.input}
autoCorrect={false}
data={films.length === 1 && comp(query, films[0].title) ? [] : films}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Enter the film title"
renderItem={({ item }) => (
<TouchableOpacity onPress={() => this.setState({ query: item.title })}>
<Text style={styles.itemText}>
{item.title} ({item.release_date})
</Text>
</TouchableOpacity>
)}
/>
}
}
However, my code requires to be inside a function, as in the example below, but it generates the following error ReferenceError: Can't find variable: films
import React, { Component } from 'react';
import Autocomplete from 'react-native-autocomplete-input';
export default class Registrar extends Component{
state = {
films: [],
query: '',
}
componentDidMount() {
const json = require('../assets/json/titles.json');
const { results: films } = json;
this.setState({ films });
}
findFilm(query) {
if (query === '') {
return [];
}
const { films } = this.state;
const regex = new RegExp(`${query.trim()}`, 'i');
return films.filter(film => film.title.search(regex) >= 0);
}
renderInputField() {
return (
<Autocomplete
autoCapitalize="none"
style={styles.input}
autoCorrect={false}
data={films.length === 1 && comp(query, films[0].title) ? [] : films}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Enter the film title"
renderItem={({ item }) => (
<TouchableOpacity onPress={() => this.setState({ query: item.title })}>
<Text style={styles.itemText}>
{item.title} ({item.release_date})
</Text>
</TouchableOpacity>
)}
/>
)
}
render() {
const { query } = this.state;
const films = this.findFilm(query);
const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();
return(
{this.renderInputField()}
}
}
I need it to be within a function because this field must appear when answering yes in the previous question
Please, Help me!

Answer 1

Can you try like following. Just add construtor to your class
export default class Registrar extends Component{
construtor(props){
super(props)
this.state = {
films: [],
query: '',
}
}
}
Otherwise check the error line number(it will display with the error), then you can easily find out where its occurred.