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