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>
    );
}

Answer 1

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

Answer 2

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!