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.
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.