Pluggable Widget Error

0
Hi All,   I have created a sample React Native pluggable widget, which shows a list of data from a data source.   I am getting this error when rendering the widget in the Mendix console. Cannot read property 'displayName' of undefined.   There is no prop value for DisplayName in my XML file. I have used Datasource as a nanoflow to debug and see if the values are coming. The nanoflow is not triggered.   My XML :  propertyGroup caption="General">             <property key="ref" type="association" required="true" selectableObjects="objectsDatasource">                 <caption>Select Association</caption>                 <description>Select an Association</description>                 <associationTypes>                  <associationType name="Reference"/>                 </associationTypes>             </property>             <property key="objectsDatasource" type="datasource" isList="true">                 <caption>Selectable objects</caption>                 <description>List of objects shown in dropdown</description>             </property>             <property key="displayAttribute" type="attribute" dataSource="objectsDatasource">                 <caption>Display attribute</caption>                 <description>Attribute to display in the dropdown</description>                 <attributeTypes>                     <attributeType name="String" />                 </attributeTypes>             </property>   My TSX :  const [options, setOptions] = useState<Array<{ id: string; displayValue: string; object: ObjectItem }>>([]);;       useEffect(() => {         if (props.objectsDatasource &&             props.objectsDatasource.status === ValueStatus.Available &&             Array.isArray(props.objectsDatasource.items) &&             props.displayAttribute)             {             const mapped = props.objectsDatasource.items             .filter(item => !!item)             .map(item => {                 const attr = props.displayAttribute.get(item);                 const displayValue = attr?.value ?? "Unnamed";                 return {                     id: item.id,                     displayValue,                     object: item                 };             });             setOptions(mapped);         }     }, [props.objectsDatasource?.status, props.objectsDatasource?.items, props.displayAttribute]);       // Show loading until data is ready       if (         !props.objectsDatasource ||         props.objectsDatasource.status !== ValueStatus.Available ||         !Array.isArray(props.objectsDatasource.items) ||         !props.displayAttribute     ) {         return (             <View style={styles.container}>                 <Text>Loading...</Text>             </View>         );     }       return (         <View style={styles.container}>             <FlatList                 data={options}                 keyExtractor={item => item.id}                 renderItem={({ item }) => (                     <TouchableOpacity>                         <Text style={styles.itemText}>{item.displayValue}</Text>                     </TouchableOpacity>                 )}             />         </View>           );   Thanks in Advance.  
asked
1 answers
0

RenderItem is a function and should return an element, so insert return

 

                renderItem={({ item }) => (

                    return <TouchableOpacity>

                        <Text style={styles.itemText}>{item.displayValue}</Text>

                    </TouchableOpacity>

                )}

 

answered