Reactjs 有什么问题？我做错了吗？还有别的方法吗？

这是我的代码，我得到的错误在附件中。我的代码中的错误是什么。我的代码的目的是，在输入Textinput时，如果密码长度小于10，则应显示长度小于10的消息，当长度大于10时，消息将消失

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、按钮、文本输入}；
常量应用=（）=>{
const[name，setName]=useState（“”）；
返回(
Nam likhay Apna
setName（newValue）}
/>
if（{name}.length<10）{
console.log（'密码应大于10个输入'）
}
);
};
const styles=StyleSheet.create({
inp：{
差额：15，
边框颜色：“黑色”，
边框宽度：2
}
});
导出默认应用程序；

工作示例：

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、按钮、文本输入}；
常量应用=（）=>{
const[name，setName]=useState（“”）；
返回(
Nam likhay Apna
{
setName（newValue）；
如果（名称长度<10）{
console.log（'密码应大于10个条目'）；
}
}}
/>
{name.length<10
？'密码应大于10个输入'
：“正确的密码”}
);
};
const styles=StyleSheet.create({
inp：{
差额：15，
边框颜色：“黑色”，
边界宽度：2，
},
});
导出默认应用程序；

工作示例：

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、按钮、文本输入}；
常量应用=（）=>{
const[name，setName]=useState（“”）；
返回(
Nam likhay Apna
{
setName（newValue）；
如果（名称长度<10）{
console.log（'密码应大于10个条目'）；
}
}}
/>
{name.length<10
？'密码应大于10个输入'
：“正确的密码”}
);
};
const styles=StyleSheet.create({
inp：{
差额：15，
边框颜色：“黑色”，
边界宽度：2，
},
});
导出默认应用程序；

使用

name.length

代替

{name}.length

使用

name.length

代替

{name}.length

解析。谢谢你。谢谢兄弟

import React, {useState} from 'react';
import {StyleSheet, Text,View,Button,TextInput} from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  return (
    <View>
    <Text> Nam likhay Apna</Text>
      <TextInput
      secureTextEntry={true}
      style = {styles.inp}
      autoCapitalize = "none"
      autoCorrect = {false}
      value = {name}
      onChangeText = {newValue => setName(newValue)}
      />
    if({name}.length < 10){
        console.log('Password should be greater than 10 enteries')
    }
    </View>
  );
};

const styles = StyleSheet.create({
    inp:{
        margin:15,
        borderColor: 'black',
        borderWidth: 2 
    }
});
export default App;

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  return (
    <View>
      <Text style={{ marginHorizontal: 15 }}> Nam likhay Apna</Text>
      <TextInput
        secureTextEntry={true}
        style={styles.inp}
        autoCapitalize="none"
        autoCorrect={false}
        value={name}
        onChangeText={(newValue) => {
          setName(newValue);
          if (name.length < 10) {
            console.log('Password should be greater than 10 enteries');
          }
        }}
      />
      <Text style={{ color: name.length < 10 ? 'red' : 'green', marginHorizontal: 15 }}>
        {name.length < 10
          ? 'Password should be greater than 10 enteries'
          : 'Correct Password'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  inp: {
    margin: 15,
    borderColor: 'black',
    borderWidth: 2,
  },
});
export default App;