Условный рендеринг onClick = {} с использованием map () в React

Question

Я работаю над компонентом React, и мне нужно использовать условное выражение внутри метода onClick, внутри метода map (), когда пользователи выбирают выбранную опцию, эта опция больше не доступна в списке навыков, который пользователь может исследоватьи как только пользователь отменит этот параметр, он вернется в список доступных параметров.

Я начинаю программировать и не знаю, как написать это очень хорошо.Может ли кто-нибудь помочь мне и объяснить мне синтаксис?Большое спасибо <3 </p>

import React, { useEffect, useState } from "react";
import axios from "./axios";

export default function FindCollaborator(props) {

    const [selectedSkills, useSellectedSkills] = useState([]);
    const [userSearch, setUserSearch] = useState("");

    let skills = [
        "plumbing",
        "python",
        "javascript",
        "ruby on rails",
        "first aid",
        "cooking",
        "home repairs",
        "writing",
        "public speaking",
        "basic computer skills",
        "writing resume",
        "writing cover letter",
        "basic math",
        "basic etiquette",
        "basic civis",
        "coaching",
        "german",
        "english",
        "spanish",
        "italian",
        "chinese",
        "french",
        "japonese"
        ];


    skills = skills.filter(skill => skill.startsWith(userSearch));
    console.log(skills);


    const handleSubmit = e => {
        e.preventDefault();
    };

    const submitButton = e => {
        e.preventDefault();
        axios
            .post("/findcollaborator", props)
            .then(res => {
                console.log("res.data /findcollaborator:", res.data);
                setUserSearch(res.data);
            })
            .catch(error => {
                console.log("Error on POST /findcollaborator:", error);
            });
    };

    useEffect(() => {
        console.log("useEffect on FindCollaborator running");
        axios
            .get("/findcollaborator")
            .then(res => {
                console.log("res.data on get /findcollaborator:", res.data);
                useSellectedSkills(res.data);
            })
            .catch(error => {
                console.log("Error on get /findcollaborator:", error);
            });
    }, []);

    useEffect(() => {
        console.log("useEffect2 on FindCollaborator running:");
        axios
            .get("/findcollaborator" + userSearch)
            .then(res => {
                console.log("re.data on get /findcollaborator 2:", res.data);
                useSellectedSkills(res.data);
            })
            .catch(error => {
                console.log("Error on get /findcollaborator 2:", error);
            });
    }, [userSearch]);
    console.log(userSearch);

    return (
        <div className="find-collaborator-container">
            <div className="collaborator-profile">

                <form onSubmit={handleSubmit} className="questions-form">
                    <div className="skill-one-container">

                        <h3>Skill One</h3>
                        <input
                            onChange={e => setUserSearch(e.target.value)}
                            placeholder="insert skill one"
                        />

                        <h3>
                            From 0 to 5, how would you rate your &quot;skill
                            name&quot; skills?
                        </h3>

                        <select name="rating">
                            <option value="selected disabled hidden">
                                Rate your skills
                            </option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>

                        <h3>
                            Would you like to teach or learn &quot;skill
                            name&quot;?
                        </h3>
                        <select name="status">
                            <option value="selected disabled hidden">
                                Choose an option
                            </option>
                            <option value="learn">Learn</option>
                            <option value="teach">Teach</option>
                        </select>
                    </div>

                    <button
                        className="find-collaborator-button"
                        onClick={submitButton}
                    >
                        Submit
                    </button>
                </form>
            </div>

//this is the section where I need to map

            **{skills.map(skill => (
                <div onClick={e => skills}>
                    {skill}
                </div>
        ))}**

        </div>
    );
}

Answer 1

Я не уверен, почему у вас есть жестко закодированный массив, а затем сетевой запрос, который меняет выбранные навыки

Ваш код смешивает жестко закодированные действия и действия на стороне клиента с сетевыми запросами, которые, кажется, выполняют то же самоевещь

Вы, вероятно, захотите сначала получить свой список навыков, а затем отфильтровать его на стороне клиента для поиска пользователя.

Вы можете отфильтровать его (до этого), чтобы удалить ужевыбранные навыки

Я думаю, что вы должны иметь что-то вроде этого:

const [allSkills, setAllSkills] = useState([])
const [selectedSkills, setSelectedSkills] = useState([])
const [userSearch, setUserSearch] = useState("")

// request to API for list of all skills
useEffect(() => {
  axios.get(/**...**/).then(res => setAllSkills(res.data))
}, [])

// then remove already selected skills
const unselectedSkills = allSkills.filter(s => !selectedSkills.includes(s))

// then filter with user search
const filteredSkills = unselectedSkills.filter(s => s.startsWith(userSearch))

// here calling the function with the skill with return a function that takes an event, this is so you can use it directly in onClick prop like this : addSkill(skill)
const addSkill = skill => e => {
    const newSelectedSkills = [...selectedSkills, skill]
    setSelectedSkills(newSelectedSkills)
}

return (
    <div class="available-skills">
        {filteredSkills.map(s => <div onClick={addSkill(s)}>{s}</div>)}
    </div>
)