how to delete list "use client"; import { useState } from "react"; export default function Home() { const [value, setValue] = useState(""); const [list, setList] = useState([]); const handleChange = e => { setValue(e.target.value); }; const addTask = () =>…
I created a project where a component shows a list of Employees. MyEmployee component: import { useState } from "react"; export default function MyEmployee({ data = [], page = 1, size = 2, total = 0 }) { const [myEmployees,…
I have a React component like this export const NewComponent: React.FC<NewComponentProps> = ({prop1, prop2, prop3 }) => { const getAbsPositionDialog = () => { const element = document.getElementById('modalDialogId'); if (!element) { return { x: 0, y: 0 }; } const…
In NextJS 13, what is the best way of dealing with routes where a user's authentication status affects the content they see on a certain route. Specifically, I have 2 scenarios I'm not sure how best to implement: How to…
I have an array of values, and i am looping the array to display in Select Option <Form.Item label="Status"> <Select value={user.status} onChange={handleStatusChange} > {status.map((item, index) => ( <Select.Option key={index} value={item.status}> {item.name} </Select.Option> ))} </Select> </Form.Item> I want to "None" to…
I am building a reactjs checkbox table and noticed that the sorting has stopped working if the cell contains links. Is there a way to append data attributes to the cell wrapper to use as means of sorting rather than…
I have code like this: return <React.Fragment key={i + 100}> <MapMarker obj={object} key={i} position={positionMap[i]} icon={objIcon} objName={convDataArr[1]} objType={convDataArr[2]} objStatus={convDataArr[3]} objcoalition={convDataArr[4]} objUnderAttack={convDataArr[5]} objNumUnits={convDataArr[6]} pane={convDataArr[2]} zIndexOffset={100} //riseOnHover={true} ></MapMarker> <FlameMarker key={i + 1000} position={positionMap[i]} icon={iconArray[21]} > </FlameMarker> </React.Fragment> which outputs 2 markers. FlameMarker is…
I want Update nested object in react context api this is my context import { createContext, useState } from "react"; const TeethInfoContext = createContext(); export function TeethInfoProvider({ children }) { const [teethInfo, setTeethInfo] = useState({ 11: { mesial: true, distal:…
I tried to transfer a list but the screen went blank <ul className='flex flex-col gap-2 font-bodyFont'> { listItem.map(item => item.listData.map(data => ( <li>{data}</li> )) ) } </ul> a way to pass the data cleanly and without the white screen
For example: <select {...props}> <option value='my_option'> <div className='flex justify-between items-center'> <SomeIcon className='w-4'/> <p>My Option</p> </div> </option> </select> When I try the above, it just discards the icons and only show text with the default styling enter image description here