Is it possible to render/return React Native elements from functions?-CodePudding

so i want to load some data from my server using axios in React native. The data was retrieved successfully, but i don't know how to display it on the page. When i click button 'Load students' it does axios get method and after that calls method 'showStudents' but that method doesn't return anything. I really don't understand how rendering works in react native so i would appreciate any help and guidance. Also if there is easier way to do all of this, i'm open for suggestions.

export default function Students() {
const [s, setStudents] = useState('')

const getStudents = async () => {
    try{
        const {data: {students}} = await axios.get('http://192.168.1.2:3000/api/v1/students')
        setStudents(students)
        //console.log(students)
        showStudents()
    }
    catch(error){
        console.log(error)
    }
}

const showStudents = () => {
    
    return( <ScrollView>
            {
                s.map((student) => (
                    <ListItem key={student._id} bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>{student.firstName}</ListItem.Title>
                            <ListItem.Subtitle>{student.index}</ListItem.Subtitle>
                        </ListItem.Content>
                    </ListItem>
                ))
            }
        </ScrollView>)
    
}


return (
    <View style={styles.container}>
        <Button title='Load students' color='green' onPress={getStudents}/>
    </View>
);

}

CodePudding user response：

The function showStudents returns a JSX component, but not inside of the render function of the component Students.

You can just create a new JSX component and use conditional rendering in order to render it whenever the state s (I would call it students) is not undefined and has a length strictly greater than zero.

const [students, setStudents] = useState()

const getStudents = async () => {
    try{
        const {data: {students}} = await axios.get('http://192.168.1.2:3000/api/v1/students')
        setStudents(students)
    }
    catch(error){
        console.log(error)
    }
}

return (
    <View style={styles.container}>
        <Button title='Load students' color='green' onPress={getStudents}/>
        {
            students && students.length > 0 ? <ScrollView>
            {
                students.map((student) => (
                    <ListItem key={student._id} bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>{student.firstName}</ListItem.Title>
                            <ListItem.Subtitle>{student.index}</ListItem.Subtitle>
                        </ListItem.Content>
                    </ListItem>
                ))
            }
           </ScrollView> : null
        }
    </View>
);

We could create a new component to make things more structured. Let us introduce StudentList.

export function StudentList({students}) {
    return <ScrollView>
            {
                students.map((student) => (
                    <ListItem key={student._id} bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>{student.firstName}</ListItem.Title>
                            <ListItem.Subtitle>{student.index}</ListItem.Subtitle>
                        </ListItem.Content>
                    </ListItem>
                ))
            }
           </ScrollView> 
}

Then, reuse this new component.

const [students, setStudents] = useState()

const getStudents = async () => {
    try{
        const {data: {students}} = await axios.get('http://192.168.1.2:3000/api/v1/students')
        setStudents(students)
    }
    catch(error){
        console.log(error)
    }
}

return (
    <View style={styles.container}>
        <Button title='Load students' color='green' onPress={getStudents}/>
        {
            students && students.length > 0 ? <StudentList students={students} /> : null
        }
    </View>
);