2

I can't get the application to work due to errors, unfortunately I did not find a solution on the Internet, so I ask here, what is the error?

This is my App.js code:

const users = [
    {
        name: 'Benedict Cumberbatch',
        phone: '+1 17 327 13 89',
        total: 91
    },
    {
        name: 'John Wick',
        phone: '+4 77 623 76 89',
        total: -98
    },
    {
        name: 'Ryan Thomas Gosling',
        phone: '+1 37 717 24 11',
        total: 3902
    }
];

const Users = () => {
    let userIconLetter = 'A';

    return users.map((user, index) => {
        return (
            <div style={styles.userCard} key={index}>
                <div style={styles.userIcon}>
                    <span style={styles.userIconLetter}>
                        {userIconLetter}
                    </span>
                </div>
                <div style={styles.userData}>
                    <div style={styles.userName}>
                        {user.name}
                    </div>
                    <div style={styles.userPhone}>
                        {user.phone}
                    </div>
                </div>
                <div style={styles.userValue(props.props.total > 0)}>
                    {user.total}
                </div>
            </div>
        )
    })
}

export default function App() {
  return (
    <View style={styles.container}>
        <ScrollView>
            <Users />
        </ScrollView>
    </View>
  );
}

and main.js in styles:

import { StyleSheet} from 'react-native';
const styles = StyleSheet.create({
    container: {
        flex: 1,
        fontFamily: "'Roboto', sans-serif",
    },
    navigationButton: {
        padding: "10px 15px",
    },
    userIcon: {
        width: "50px",
        height: "50px"
    },
    userCard: {
        color: 'black'
    },
    userIconLetter: {
        color: 'black'
    },
    userData: {
        color: 'black'
    },
    userName: {
        color: 'black'
    },
    userPhone: {
        color: 'black'
    },
    userValue: (positive) => {
        let color = positive ? 'green' : 'red';
    
        return {
            color: color,
        };
    },
})

export { styles }

I've got errors for every user block:

The above error occurred in the component:

div div div Users div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 ./node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js/ScrollViewBase<@http://localhost:19006/static/js/bundle.js:32894:18 ScrollView ScrollView div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 App ExpoRootComponent@http://localhost:19006/static/js/bundle.js:4196:83 div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 AppContainer@http://localhost:19006/static/js/bundle.js:32304:18

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

And one error at the end:

Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

1

1 Answer 1

0

I found solution, i think. To make code work you should replace '' by '' and this will work fine, but I also moved code to component file:

import React, { Component } from 'react';
import styles from '../assets/css/user';
import {Text, View} from "react-native-web";

class User extends Component {
    render() {
        let userIconLetter = Array.from(this.props.name)[0];

        return (
            <View style={styles.card}>
                <View style={styles.icon}>
                    <Text style={styles.iconLetter}>
                        {userIconLetter}
                    </Text>
                </View>
                <View style={styles.data}>
                    <View style={styles.Name}>
                        <Text>{this.props.name}</Text>
                    </View>
                    <View style={styles.phone}>
                        <Text>{this.props.phone}</Text>
                    </View>
                </View>
                <View style={styles.value}>
                    <Text>{this.props.total}</Text>
                </View>
            </View>
        );
    };
}

export default User;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.