There was a gap. I have an application being developed for testing.

Error:View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter.

I have 3 files, data.js(here I take information on the test (all sorts of initial data) ), testMath.js(this file brings it all together ) , Questions.js(and in this there is an interaction with data )

Help, I need somebody))

data.js:

export const data = {
    testName:"TestName",
    questions:[
      {
      title:"question?",
      code: "___ d = 123;",
      variants : [
         {title: "const", "flag": true},
         {title: "var"},
         {title: "let"}
      ]
      },
       {
      title:"question?",
      code: "let с;",
      variants : [
         {title: "undefined", "flag": true},
         {title: "null"},
         {title: "number"}
      ]
      },
       {
      title:"question",
      code: "",
      variants : [
         {title: "вариант1", "flag": true},
         {title: "вариант2", "flag": true},
         {title: "вариант3"}
      ]
      },{
      title:"question",
      code: "",
      variants : [
         {"text": "1", "flag": "const"}
      ]
      }
    ]
    }

    export default data

testMath.js

import { ReactDOM } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { gStyle } from '../styles/style';
import { data } from './data'
import Questions from './Questions'


export default function testMath() {
  
    return (
      
      <View style={gStyle.main}>
        
          <Text style={styles.h1}>Hello! </Text>
          <Questions data={data} />
          
      </View>
      
    );

}

const styles = StyleSheet.create({
  h1: {
    textAlign: 'center',
    fontSize: 24,
    fontFamily: 'Oswald-Bold',
  }
});

Questions.js:

import { View, Text, StyleSheet } from 'react-native';
import {input} from "react-native-web";


export default function Questions({ data }) {
    
    let questions = data.questions
    questions = questions.map(function(el, index){
    let j = 0
    let variants = el.variants.map(function(e, i) {
        j  
        return (
            <View>
            <input type="checkbox" id={'id'   j} /> 
            <label for={'id'   j}> {el.title}</label> 
            </View>
        )
    })

        return ( 
            <View>
                <Text style={styles.questionHead}> {el.title} </Text>
                <Text style={styles.questionExample}>{el.code} </Text>
                {variants}
            </View>
        )
    })
    

return (
    <View>
        <Text style={styles.testTeme}> 
            {data.testName}
        </Text>
            {questions}
    </View>
)

}
const styles = StyleSheet.create({ 
    testTeme: {
        textAlign: 'center',
        paddingTop: 15,
        fontFamily: 'Oswald-Bold',
        fontSize: 25,
    },
    questionHead: {
        textAlign: 'center',
        paddingTop: 15,
        fontFamily: 'Oswald-Bold',
        fontSize: 20,
    },
    questionExample: {
        paddingTop: 10,       
        fontSize: 18,
        textAlign: 'center',
        fontFamily: 'Oswald-light',
    },
    
})```

CodePudding user response：

You're using HTML elements inside Questions.js:

<input type="checkbox" id={'id'   j} />
<label for={'id'   j}> {el.title}</label>

Read more about react-native TextInput