Parsing error jsx attributes must only be assigned a non empty expression

I am trying to create a custom drawer in react-navigation. However I am getting an error. The error is JSX attributes must only be assigned a non-empty expression. I have even create the array and maped it to show but still getting an error. Did i miss anything?

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';        

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
          </Image>)
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});


Drawer.navigationOptions = {

  contentOptions: {
    activeBackgroundColor: '#ff5976',
    style: {
      backgroundColor: '#000000',
      zIndex: 100,
      paddingTop: 0
    }
  },
  header: ({ state, setParams, navigate, dispatch })  => ({
    visible: true,
    tintColor: '#ffffff',
    title: "LokaLocal",
    style: {
      backgroundColor: '#ff5976'
    },
    right: (
        <TouchableOpacity
          onPress={() => navigate('DrawerOpen')}
        >
          <Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
    left: (
        <TouchableOpacity
          onPress={}
        >
          <Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
  })
}


export const Routes = StackNavigator(
  {
    Login: { screen: Login },
    Dashboard: {screen: Drawer},
  },
);

I am using react-navigation 1.0.0.bet.9

I am trying to create a custom drawer in react-navigation. However I am getting an error. The error is JSX attributes must only be assigned a non-empty expression. I have even create the array and maped it to show but still getting an error. Did i miss anything?

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';        

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
          </Image>)
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});


Drawer.navigationOptions = {

  contentOptions: {
    activeBackgroundColor: '#ff5976',
    style: {
      backgroundColor: '#000000',
      zIndex: 100,
      paddingTop: 0
    }
  },
  header: ({ state, setParams, navigate, dispatch })  => ({
    visible: true,
    tintColor: '#ffffff',
    title: "LokaLocal",
    style: {
      backgroundColor: '#ff5976'
    },
    right: (
        <TouchableOpacity
          onPress={() => navigate('DrawerOpen')}
        >
          <Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
    left: (
        <TouchableOpacity
          onPress={}
        >
          <Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
  })
}


export const Routes = StackNavigator(
  {
    Login: { screen: Login },
    Dashboard: {screen: Drawer},
  },
);

I am using react-navigation 1.0.0.bet.9

This article will show a few solutions to fix JSX attributes that must only be assigned a non-empty expression, such as adding a value to the attribute or remove the attribute.

The reason for the error JSX attributes must only be assigned a non-empty expression

This error occurs when the program realizes that you are leaving one or more attributes of elements blank in the JSX code. On the console screen, an error will appear JSX attributes must only be assigned a non-empty expression so the user can know and debug the code.

Code:

import React from 'react';

const App = () => {

  return (
    <div>
     <button onClick={}>Click me!!</button>
    </div>
  );
};

export default App;

Output:

For example, in the above code, the button’s onClick attribute is empty, so Eslint will recognize this and report an error.

How to fix this error

Adding a value to the attribute 

We will add a value to the element’s empty attribute to fix this. Eslint will recognize the attribute has been set to a valid value, and the JSX attributes must only be assigned a non-empty expression error no longer appears. Follow the code below to learn how to fix the error with this method.

Code:

import React from 'react';

const handleClick=()=>{
console.log("You have clicked the button");
}

const App = () => {
  return (
    <div>
     <button onClick={handleClick}>Click me!!</button>
    </div>
  );
};

export default App;

Output:

When you pass a function value to the button element’s onClick attribute, the program knows that the attribute is no longer empty. The Eslint warning error also disappeared, and the program ran usually. Or you can refer to the solution below.

Remove the attribute

If you don’t know what to fill in the attribute or need to show it for debugging, you can also remove it so that the error no longer appears. 

Code:

import React from 'react';

const App = () => {

  return (
    <div>
     <button>Click me!!</button>
    </div>
  );
};

export default App;

This is a workaround for React programmers to prevent the error from appearing to continue with the code, or when you find the value to set for the property, you can substitute it for the attribute value. Good luck with these solutions

Summary

To summarize, the article has shown you two solutions to prevent the JSX attributes must only be assigned a non-empty expression error from appearing during the coding process. You should use the solution of adding a value to the attribute because it will be a permanent solution.

I am trying to create a custom drawer in react-navigation. However I am getting an error. The error is JSX attributes must only be assigned a non-empty expression. I have even create the array and maped it to show but still getting an error. Did i miss anything?

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';        

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
          </Image>)
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});


Drawer.navigationOptions = {

  contentOptions: {
    activeBackgroundColor: '#ff5976',
    style: {
      backgroundColor: '#000000',
      zIndex: 100,
      paddingTop: 0
    }
  },
  header: ({ state, setParams, navigate, dispatch })  => ({
    visible: true,
    tintColor: '#ffffff',
    title: "LokaLocal",
    style: {
      backgroundColor: '#ff5976'
    },
    right: (
        <TouchableOpacity
          onPress={() => navigate('DrawerOpen')}
        >
          <Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
    left: (
        <TouchableOpacity
          onPress={}
        >
          <Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
  })
}


export const Routes = StackNavigator(
  {
    Login: { screen: Login },
    Dashboard: {screen: Drawer},
  },
);

I am using react-navigation 1.0.0.bet.9

Я пытаюсь создать пользовательский ящик в интерактивной навигации. Однако я получаю сообщение об ошибке. Ошибка в JSX attributes must only be assigned a non-empty expression. Я даже создал массив и отобразил его, чтобы показать, но все еще получаю сообщение об ошибке. Я что-то пропустил?

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';        

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
          </Image>)
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});


Drawer.navigationOptions = {

  contentOptions: {
    activeBackgroundColor: '#ff5976',
    style: {
      backgroundColor: '#000000',
      zIndex: 100,
      paddingTop: 0
    }
  },
  header: ({ state, setParams, navigate, dispatch })  => ({
    visible: true,
    tintColor: '#ffffff',
    title: "LokaLocal",
    style: {
      backgroundColor: '#ff5976'
    },
    right: (
        <TouchableOpacity
          onPress={() => navigate('DrawerOpen')}
        >
          <Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
    left: (
        <TouchableOpacity
          onPress={}
        >
          <Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
  })
}


export const Routes = StackNavigator(
  {
    Login: { screen: Login },
    Dashboard: {screen: Drawer},
  },
);

Я использую response-navigation 1.0.0.bet.9

All comments

<MyComponent name="React" />

React.createElement(MyComponent, { name: 'React' })

React.createElement(MyComponent, { name: })

// props passed down
<MyComponent name="React" />

// without props 
<MyComponent />