Can somebody help me to delete data of user list
Code is available below https://codesandbox.io/s/r4try
Please tell me how to delete particular user from the user list. please use delete button on user
here is the solution
Codesandbox Demo
https://codesandbox.io/s/control-between-forms-ant-design-demo-99sus?file=/index.js
<Form.Item
label="User List"
shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
>
{({ getFieldValue, setFieldsValue }) => {
const users = getFieldValue('users') || [];
return users.length ? (
<ul>
{users.map((user, index) => (
<li key={index} className="user">
<Avatar icon={<UserOutlined />} />
{user.name} - {user.age}
<CloseOutlined onClick={() =>{
const updatedUsers = delete users[index];
setFieldsValue({users: updatedUsers})
}} style={{ paddingLeft: 15 }}/>
</li>
))}
</ul>
) : (
<Typography.Text className="ant-form-text" type="secondary">
( <SmileOutlined /> No user yet. )
</Typography.Text>
);
}}
</Form.Item>
Related
im currently building a website similar to reddit but im having troubles with the comments, i can toggle the comment on and off on click but whenever more than one comment is clicked it just displays the comment data of the recent comment that was clicked.
this is my code:
const handleComments = (subText, id) => {
setCommentIds(prev => (prev.includes(id) ? prev.filter(cid => cid !== id) : [...prev, id]));
dispatch(getComments({ subText, id }));
};
const popularRendering = () => {
if (popular.isLoading) {
return Array(5)
.fill()
.map((_, index) => <FeedSkeleton key={index} />);
} else if (popular.data && popular.data.data) {
return popular.data.data.children.map((data, index) => (
<div className="box-container" key={index}>
<div className="data-container">
<div className="votes-container">
<TiArrowUpOutline
size={27}
className={`${upvoted[data.data.id] ? "up-voted" : "up-vote"}`}
onClick={() => handleUpVote(data.data.id)}
/>
<p className={upvoted[data.data.id] ? "up-voted" : downvoted[data.data.id] ? "down-voted" : ""}>{formatNumber(data.data.score)}</p>
<TiArrowDownOutline
size={27}
className={`${downvoted[data.data.id] ? "down-voted" : "down-vote"}`}
onClick={() => handleDownVote(data.data.id)}
/>
</div>
<div className="feed-header">
{subredditIconUrl[data.data.subreddit_name_prefixed] ? (
<img className="feed-icon-img" src={subredditIconUrl[data.data.subreddit_name_prefixed]} alt="subreddit-icon" />
) : null}
<p>{data.data.subreddit_name_prefixed}</p>
<span>Posted by u/{data.data.author} </span>
<span>{formatDate(data.data.created_utc)}</span>
</div>
<div className="feed-body">
<p>{data.data.title}</p>
{isImage(data.data.url) ? (
<img src={data.data.url} alt="subreddit" />
) : data.data.is_video ? (
<video height="auto" width="100%" controls>
<source src={data.data.media.reddit_video.fallback_url} />
<p className="error-media">Sorry, this content cannot be displayed.</p>
</video>
) : null}
</div>
<div className="footer">
<div className="comments" onClick={() => handleComments(data.data.subreddit_name_prefixed, data.data.id)}>
<GoComment size={25} className="comment-icon" />
<p>{formatNumber(data.data.num_comments)} Comments</p>
</div>
</div>
{subreddit.commentsLoading
? Array(5)
.fill()
.map((_, index) => <CommentsSkeleton key={index} />)
: commentIds.includes(data.data.id) && <Comments postId={data.data.id} />}
</div>
</div>
));
}
};
i tried using an array to store the ids and only display the ids of those comments but it just always resulted in issues and an infinite loop of headaches and errors.
I don't understand how I can add an item on localStroge with the handle change method in react js.
The problem is I want to add a favorite list. When I click the favorite list all checkbox fill I need to control them.
I want to store the filled item in my local storage. handlechange function fill all favorite icon why?
Every click will be a single item fill. Is it possible to Material UI or Martial UI checkBox icon? How can I handle it?
Here is my UI view
function Main() {
// Here is my state define
const [checked, setChecked] = React.useState(
localStorage.getItem("love") === "true"
);
const handleChange = (e) => {
localStorage.setItem("love", `${e.target.checked}`);
setChecked(e.target.checked);
console.log(e.target.checked);
};
return (
<>
<div className="row mt-5">
{isLoading ? (
<>
{Array.from({ length }).map((_, i) => (
<MainLoading key={i} />
))}
</>
) : error ? (
<p>Error occured</p>
) : (
<>
{data?.map((product) => (
<div className="col-md-3 mb-5 text-center" key={product.id}>
<img
className="w-100"
style={{ height: "200px", objectFit: "contain" }}
src={product.image}
alt=""
/>
<div>{product.title.substring(0, 20)}</div>
<button
onClick={() => handelAddTocard(product)}
className="mt-3"
>
Add to card
</button>
<button>
<Link
to={`/details/${product.id}`}
className="mt-3 text-decoration-none text-black"
>
view details
</Link>
</button>
{/* How can i control evey single item */}
<Checkbox
checked={checked}
onChange={handleChange}
icon={<FavoriteBorder />}
checkedIcon={<Favorite />}
/>
</div>
))}
</>
)}
</div>
</>
);
}
export default Main;
The problem is that you are using a boolean and you have no way to identify a specific item.
If you want to favorite multiple items, I would use something like this:
const [checked, setChecked] = React.useState(
JSON.parse(localStorage.getItem("loveIds") || "[]")
);
const handleCheck = (id, productChecked) => {
const newItems = productChecked ? [...checked, id] : checked.filter(x => x !== id);
localStorage.setItem("loveIds", JSON.stringify(newItemS));
setChecked(newItems);
console.log(newItems);
};
// ...
<Checkbox
checked={checked}
onChange={(e) => handleCheck(product.id, e.target.checked)}
icon={<FavoriteBorder />}
checkedIcon={<Favorite />}
/>
I have defined the Key in my code key={item.id} when mapping through reposit list and I am trying to use it as a prop in my here {openModal && <Modal repo={reposit} my_key={key} setOpenModal={setOpenModal}/> } but it doesn't seems to work. Someone can explain to me how can I access to the key on my Modal by using it as a prop ?
Here is the part of the code :
<List.Item>
<List.Content>
{reposit.map((item) => (
<li key={item.id} onClick={() => {setOpenModal(true)}}>
<i className="folder icon" /> {item.name}
</li>
))}
{openModal && <Modal repo={reposit} my_key={key} setOpenModal={setOpenModal}/> }
</List.Content>
</List.Item>
Thank you for your help.
You have to use state to keep track the key for the clicked list item like below:
import React, { useState } from "react";
const App = () => {
const [myKey, setMyKey] = useState();
return (
<List.Item>
<List.Content>
{reposit.map((item) => (
<li
key={item.id}
onClick={() => {
setMyKey(item.id);
setOpenModal(true);
}}
>
<i className="folder icon" /> {item.name}
</li>
))}
{openModal && (
<Modal repo={reposit} myKey={myKey} setOpenModal={setOpenModal} />
)}
</List.Content>
</List.Item>
);
};
The li key attribute is only defined within the li element, it is not accessible outside of it. Your modal is not a child of the li element so it can't be accessed in the way you are trying. You have to pass item.id to the modal through the li onClick function. One way would be to create state to keep track of what key should be passed to the modal, and change it within the onclick function.
const [modalKey, setModalKey] = useState()
const openModal = (key) => {
setModalKey(key)
setOpenModal(true)
}
...
<List.Item>
<List.Content>
{reposit.map((item) => (
<li key={item.id} onClick={() => openModal(item.id)}>
<i className="folder icon" /> {item.name}
</li>
))}
{openModal && <Modal repo={reposit} my_key={modalKey} setOpenModal={setOpenModal}/> }
</List.Content>
</List.Item>
I want a component to behave exactly like Accordion.
I have managed to do that.
But I am facing one issue.
If one question is open and a user tries to open the other question,it closes the first question.
I do not want that.
I want both of them to remain open and it should be closed if a user clicks on the question again.
Here is the code -->
class Accordion extends React.Component {
constructor() {
super();
this.state = {
answer: false,
selectedQue: null,
};
}
toggleAnswer = (index) => {
const { answer } = this.state;
this.setState({
selectedQue: index,
answer: !answer,
});
};
render() {
const { answer, selectedQue } = this.state;
return (
<Row className="m-t-10">
<Col md={12} sm={12} xs={12}>
{map(
questionAnswer,
(item, index) =>
item && (
<div key={index} onClick={() => this.toggleAnswer(index)}>
<div className="d-flex justify-content-between">
<Label
header={item.key}
color={index === selectedQue && answer ? '#406AE8' : '#415070'}
/>
<span className="float-right">
<Icons
className={cx(
'vertical-align-middle',
index === selectedQue && answer
? 'ac-icon-arrow-up-xs'
: 'ac-icon-arrow-down-xs',
)}
/>
</span>
</div>
{index === selectedQue && answer && (
<div>
<span
dangerouslySetInnerHTML={{
__html: item.value,
}}
/>
</div>
)}
<hr />
</div>
),
)}
</Col>
</Row>
)
}
}
im trying to do an alert when the selected option in my quiz is right or wrong but it never alerts anything
this is my options part in the quiz
{options.map((option, id) => (
<Button
size="lg"
block
key={id}
className={`ui floating message options
${userAns === option ? "selected" : null}
`}
onClick={() => {
this.checkAns(option);
this.displayCorrectWrongAlerts();
}}
>
{option}
{this.state.userAns === this.state.answer ? (
<FaCheck />
) : (
<MdClose />
)}
</Button>
))}
Here is my function to produce the alerts
displayCorrectWrongAlerts = answer => {
if (this.state.userAns === answer) {
return (
<div>
<Alert variant="danger">hellooo</Alert>
</div>
);
}
};
Any help with this