Syntax Error: Unexpected token, expected " , "

user_16266221 0
Viewed 1858

I'm getting this syntax error in react native: "Syntax Error: Unexpected token, expected "," "

return(
    <View style={ gStyle.main }>
      <Modal visible = { modalWindow }>
        <View style={ gStyle.main }>
          <Ionicons name="close" size={30} color="black" style = {gStyle.iconClose} onPress = {() => setModalWindow(false)}/>
          <Text style = {gStyle.iconTitle}>Добавить статью</Text>
          <Form />
        </View>
      </Modal>
      <Ionicons name="add" size={34} color="black" style = {gStyle.iconAdd} onPress = {() => setModalWindow(true)}/>
      <Text style = { [gStyle.title, styles.head]}>Лента</Text>
      <FlatList data = {news} renderItem = {({item}) => (
        <TouchableOpacity style = {styles.item} onPress = {() => navigation.navigate('FullInfo', item )}>
          <Image style = {gStyle.image} source = {{uri: item.img}}/>
          <Text style = {styles.title}>{item.name}</Text>
          <Text style = {styles.anons}>{item.anons}</Text>
      </TouchableOpacity>
      )} />
    </View>
  );
}

I don't understand the error message either, what excactly does it mean when it says "expected ,"?

Error

UPDATE

import React, {useState} from 'react';
import { StyleSheet, View, Text, TouchableOpacity, FlatList, Image, Modal } from 'react-native';
import { gStyle } from '../styles/style';
import { Ionicons } from '@expo/vector-icons';
import Form from './Form';

export default function Main({ navigation }) {

  const [news, setNews] = useState([
    {name: 'Google', anons: 'Something interesting', full: 'Google Fulling page', key: '1', img: 'https://static.zara.net/photos///2020/I/0/1/p/4341/757/800/2/w/1126/4341757800_6_2_1.jpg'},
    {name: 'Yahoo', anons: 'Something didn`t interesting', full: 'Yahoo Fulling page', key: '2', img: 'https://i.pinimg.com/564x/89/1d/83/891d833d89de653904500547b6257218.jpg'},
    {name: 'Yandex', anons: 'Something bake interesting', full: 'Yandex Fulling page', key: '3', img:'http://ideaswood.selbermachendeko.com/wp-content/uploads/2019/10/8-einladende-coole-Ideen-Holzbearbeitungskuche-Tiny-House-Holzbearbeitungsschreib-…-WoodWorking.jpg'}
  ]);

  const [modalWindow, setModalWindow] = useState(false); 

  const addArticle = (article => {
    setNews((list) => {
      article.key = Math.random().toString();
      return [
        article,
        ...list,
      ]
    });
    setModalWindow(false);
  }

  return(
    <View style={ gStyle.main }>
      <Modal visible = { modalWindow }>
        <View style={ gStyle.main }>
          <Ionicons name="close" size={30} color="black" style = {gStyle.iconClose} onPress = {() => setModalWindow(false)}/>
          <Text style = {gStyle.iconTitle}>Добавить статью</Text>
          <Form />
        </View>
      </Modal>
      <Ionicons name="add" size={34} color="black" style = {gStyle.iconAdd} onPress = {() => setModalWindow(true)}/>
      <Text style = { [gStyle.title, styles.head]}>Лента</Text>
      <FlatList data = {news} renderItem = {({item}) => (
        <TouchableOpacity style = {styles.item} onPress = {() => navigation.navigate('FullInfo', item )}>
          <Image style = {gStyle.image} source = {{uri: item.img}}/>
          <Text style = {styles.title}>{item.name}</Text>
          <Text style = {styles.anons}>{item.anons}</Text>
      </TouchableOpacity>
      )} />
    </View>
  );
}


const styles = StyleSheet.create({
  head: {
    marginBottom: 5,
  },
  item: {
    width: '100%',
    marginBottom: 10,
  },
  title: {
    fontFamily: 'mn-bold',
    fontSize: 22,
    textAlign: 'center',
    marginTop: 10,
    color: '#702573',
  },
  anons: {
    fontFamily: 'mn-regular',
    fontSize: 16,
    textAlign: 'center',
    marginTop: 5,
    color: '#111111',
  }
});
jsx react-native reactjs javascript ios
1 Answers

Remove the opening parens at article argument, or add a closing parens.

const addArticle = article => {
  setNews((list) => {
    article.key = Math.random().toString();
    return [article, ...list];
  });
  setModalWindow(false);
}

or

const addArticle = (article) => {
  setNews((list) => {
    article.key = Math.random().toString();
    return [article, ...list];
  });
  setModalWindow(false);
}

QnA

I don't understand the error message either, what excactly does it mean when it says "expected ,"?

Syntax-wise, I'm assuming it (the linter?) was assuming you were trying to use the Comma operator.

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a for loop.

user_86908570
Related