React: Parsing error: Unexpected token, expected "("

Question

i am getting Parsing error: Unexpected token, expected "(".

I have no idea where i'm getting this unexpected error. anyways i'm probably new to reactJS. It would be great if anybody could figure out where i'm getting this unexpected error. thank you so much in advance.

./src/components/listing/Search.js :


function PostListPageByUser() {
    const [posts, setPost] = useState([]);
    const [userId, setUserId] = useState([]);
    let signal = axios.CancelToken.source();

    function handleChange(event) {
        setUserId(event.target.value);
    }

    function handleClick = (event) => {
        axios.get("http://localhost:8000/api/car/p_list?search=" + event, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }
    return (
        <React.Fragment>
        <section class="product_list section_padding">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="product_sidebar">
                        <div class="single_sedebar">
                            <form>
                                <input type="text" name="search" onChange={handleChange} placeholder="Search keyword"/>
                                <i class="ti-search" onClick={handleClick}></i>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="product_list">
                        <div class="row"> <br/><br/><br/>

                        {
                            posts.map((post) => {<ul key={post.id}>
                                <div class="col-lg-8 col-xl-9">

                                    <img src={post.product_image} alt="" class="img-fluid" />
                                    <h3>{post.title}</h3>

                                </div>
                            </ul>})
                        }

                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>
        </React.Fragment>
    );
}

Chukwuemeka Inya · Accepted Answer · 2020-07-26T07:02:30.263

I see 2 issues with your snippet.

Firstly, since you are using an arrow function for handleClick, you need to change it to:

    const handleClick = (event) => {
        axios.get("http://localhost:8000/api/car/p_list?search=" + event, {
            cancelToken: signal.token,
        })
        .then(res => {
            const posts = res.data;
            setPost(posts);
        }).catch(err => {
        console.log(err);
    });

Secondly,

{
    posts.map((post) => {
        return(
            <ul key={post.id}>
                <div class="col-lg-8 col-xl-9">
                <img src={post.product_image} alt="" class="img-fluid" />
                <h3>{post.title}</h3>
                </div>
            </ul>
        )
    })
}

As an aside, the ul tag is misused here. You should use a div instead. That should not stop your code from working though but for the sake of knowledge and working in a production environment, it's important you always use the right tags. You can learn more here

score 0 · Answer 2 · answered Jul 26 '20 at 05:18

0

you need to change this part

const handleClick = (event) => {
        axios.get("http://localhost:8000/api/car/p_list?search=" + event, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }

you cannot use the function and arrow function syntax simultaneously!

answered Jul 26 '20 at 05:18

amdev

6,703
6
42
64

okay! now i'm getting this error: `Expected an assignment or function call and instead saw an expression no-unused-expressions` – satyajit Jul 26 '20 at 05:22
please read this post: https://stackoverflow.com/questions/45573277/react-expected-an-assignment-or-function-call-and-instead-saw-an-expression – amdev Jul 26 '20 at 05:24
i didn't get any useful from this above link. – satyajit Jul 26 '20 at 05:27

React: Parsing error: Unexpected token, expected "("

2 Answers2