Getting problem in conditional rendering using key

Question

I am trying to render option in code with disable and without disable using key of map and a value of user data but getting error in my console that unexpected token at key>user.col help me to figure out this problem.

const { chapters, lessons, lessonContent } = TutorLessons();///---------API DATA 
const TypingTutor = () => {
  const history = useNavigate();
  const temp = lessons[0];
  const [row, setRow] = useState(0);
  const [col, setCol] = useState(0);
  const [lessonData, setlessonData] = useState(temp);
  const inputref = useRef(null);
  const [user,setUser]=useState({});


  const callTutorPage = async () => {
    try {
      const res = await fetch("/typingTutor", {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "appliction/json",
        },
        credentials: "include",
      });
        const userdata =await res.json();
        setUser(userdata);
        setRow(userdata.row);
        setCol(userdata.col);
      if (!res.status === 200) {
        const error = new Error(res.error);
        throw error;
      }
    } catch (error) {
      console.log(error);
      history("/Login");
    }
  };

  useEffect(() => {
    callTutorPage();
  }, []);



  const handleChapters = (e) => {
    setRow(e.target.value);
    setCol(0);
    setlessonData(lessons[e.target.value]);
  };
  const para = lessonContent[row][col];

  const truefalse = useDispatch();
  const state = store.getState();
  const data = Object.values(state);

  const [input, setinput] = useState("");
  const [symbol, setSymbol] = useState(0);
  const [finished, setFinished] = useState(false);

  const onRestart = () => {
    setinput("");
    setSymbol(0);
    truefalse(setFalse());
    setFinished(false);
  };

  const handleInput = (e) => {
    if (!data[1]) {
      truefalse(setTrue());
    }
    const v = e.target.value;
    setinput(v);
    onFinish(v);
    setSymbol(countCorrectSymbol(v));
  };

  const countCorrectSymbol = (str) => {
    const arr = para.split("");
    let ans = str.split("").filter((s, i) => s === arr[i]).length;
    return ans;
  };

  const gotostats = useNavigate();
  const onFinish = (str) => {
    const gotoStartTypingtest = () => {
      gotostats("/LessonResult");
    };
    if (para.length === str.length) {
      onRestart();
      gotoStartTypingtest();
      setFinished(true);
      truefalse(setFalse());
    }
  };
  return (
    <>
      <div className="banner">
        <div className="container">
          {/* onClick={()=>{inputref.current.focus()}}  focus humesha input per rakhne k liye    */}
          <div className="course-detail-outer">
            <div className="course-detail-left">
              <div className="course">
                <h5>course</h5>
                <select>
                  <option value="1">1.English</option>
                </select>
              </div>
              <div className="lessons">
                <h5>Lessons</h5>
                <select
                  className="navSelect-large"
                  id="selLesson"
                  onChange={handleChapters}
                >
                  {chapters.map((id, key) => {
                    return (
                      <option value={key} key={id}>
                        {id}
                      </option>
                    );
                  })}
                </select>
              </div>
              <div style={{ paddingRight: "80px" }}>
                <h5>Exercise</h5>
                <select id="selString" onChange={(e) => setCol(e.target.value)}>
                  {lessonData.map((id, key) => {
                    return (
                      {
                        key > user.col ? (  **//Problem is here**
                          <option disabled value={key} key={id}>{id}</option>
                        ) : (
                          <option disabled value={key} key={id}>{id}</option>
                        )
                      }
                    );
                  })}
                </select>
              </div>
            </div>
            <div className="course-detail-right">
              <div className="show-keyboard">
                <h5>WPM</h5>
                <Wpm symbol={symbol} start={data[0]}></Wpm>
              </div>
              <div className="show-keyboard">
                <h5>Typos</h5>
                <WpmAccuracy para={para} userInput={input}></WpmAccuracy>
              </div>
            </div>
          </div>
          <div className="">
            <div
              className="bottom-text-container"
              onClick={() => {
                inputref.current.focus();
              }}
            >
              <ParaPreview
                para={para}
                userInput={input}
                textColor={"#d2d2d2"}
                textColor2={"#F36747"}
                backgroundC={"line"}
              ></ParaPreview>
            </div>
            <div>
              <input
                ref={inputref}
                className="para-input"
                value={input}
                onChange={handleInput}
                autoFocus
                readOnly={finished}
              ></input>
            </div>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </>
  );
};

I trying to do this change in code but getting same error

key > (user?.col ?? -1) ? (
    <option disabled value={key} key={id}>{id}</option>
  ) : (
    <option value={key} key={id}>{id}</option>
  )

Line 140:28: Parsing error: Unexpected token, expected "," (140:28) getting this error in line containg key>(user.....

Answer 1

You can set the option to disabled if the condition is satisfied, without conditional operator:

{lessonData.map((id, key) => {
    return (
      <option disabled={key > user.col} value={key} key={id}>
        {id}
      </option>
    );
  })}