So basically I got 3 plans, but I want to be able to only select 1 at the time. But when I do click on 1 all 3 are selected. I output the plans from map, tried using index of each plan, but didn't work.
const [selectedPlan, setSelectedPlan] = useState(false);
const handleSelectPlan = () => {
setSelectedPlan((prevSelectedPlan) => !prevSelectedPlan);
};
`
{data.plans.map((each) => (
<div className={styles.pricingPlans__each} key={each.id}>
<div className={styles.header}>
<h3>{each.header}</h3>
</div>
<div className={styles.price}>
<h4>£{each.price}/mo.</h4>
</div>
<div className={styles.body}>{each.body}</div>
<div className={styles.cta}>
<button onClick={() => handleSelectPlan(each.id)}>
{selectedPlan ? <FaCheck /> : null} Select
</button>
</div>
</div>
))}
You need to check for the correct selected plan not just if one is selected:
{data.plans.map((each) => (
<div className={styles.pricingPlans__each} key={each.id}>
<div className={styles.header}>
<h3>{each.header}</h3>
</div>
<div className={styles.price}>
<h4>£{each.price}/mo.</h4>
</div>
<div className={styles.body}>{each.body}</div>
<div className={styles.cta}>
<button onClick={() => handleSelectPlan(each.id)}>
{selectedPlan === each.id ? <FaCheck /> : null} Select
</button>
</div>
</div>
))}
selectedPlan ?: will only check for any plan, since a strings is truthy and will result in Facheck to be rendered for all.
Related
I would like to filter and display onclick the choice by id in a component by props.
APP COMPONENT: I display the list
<div className="App-container">
<div className="App-container-left">
<p>Liste des factures</p>
<div>
{datas.factures.map((datas) => (
<>
<ul>
<li key={datas.id}>
N° : {datas.id}|{datas.dateFacture}-{datas.client} -
Montant : {datas.montant} €
</li>
<button onClick={toggleFact} id={datas.id}>
Voir
</button>
</ul>
</>
))}
</div>
</div>
<div className="App-container-right">
{view && <ViewFact obj={datas} selectId={datas.id} />}
</div>
<div />
</div>
CHILD COMPONENT: onclick I would like display the id
export default function ViewFact(props) {
//filter with id
const filtered = props.obj.factures.filter((id) => {
return props.obj.factures.id === id;
});
return (
<>
<div>ViewFact Component</div>
<div>
{filtered.map((datas) => (
<>
<ul>
<li key={datas.id}>
N° : {datas.id}|{datas.dateFacture}-{datas.client} - Montant :{" "}
{datas.montant} €
</li>
</ul>
</>
))}
</div>
</>
);
}
If I understood correctly, you need to see the clicked item details, so
<ViewFact obj={datas} selectId={datas.id} />
should has as input only the clicked item. (you need to implement setCurrentSelectedItem so as to store the item in your local state)
<button onClick={setCurrentSelectedItem}>
Voir
</button>
<ViewFact obj={currentSelectedItem} />
and finally your compoment will be
export default function ViewFact({ datas }) {
return (
<>
<div>ViewFact Component</div>
<div>
N° : {datas.id}|{datas.dateFacture}-{datas.client} - Montant :{" "}
{datas.montant} €
</div>
</>
);
}
I am working on a quiz app and currently, I have just a button as my option but I want to choose radio buttons as my options and I also want to have a submit feature.
This is my code:
<>
{showScore ? null : <div>Countdown: {counter}</div>}
<div className="question_no">
<span>Question {currentQuestion + 2}</span>/{questions.length}
</div>
<div className="quiz-container">
{showScore ? (
<div className="score">
You scored {score} out of {questions.length}
</div>
) : (
<>
<div className="quiz-header">
<div className="question">
{questions[currentQuestion].questionText}
</div>
</div>
<div className="answer_div">
{questions[currentQuestion].answerOptions.map(
(answerOption) => (
<button
onClick={() =>
handleAnswerOptionClick(
answerOption.isCorrect
)
}
>
{answerOption.answerText}
</button>
)
)}
</div>
</>
)}
</div>
</>
how can i change the button option to radio button
Radio is not a button type, but an input type, so probably something like this:
<div className="answer_div">
{questions[currentQuestion].answerOptions.map(
(answerOption) => (
<input type="radio" id={answerOption.answerID}
onClick={() =>
handleAnswerOptionClick(
answerOption.isCorrect
)
}
/>
<label htmlFor={answerOption.answerID}>
{answerOption.answerText}
</label>
)
)}
</div>
Maybe you wanna also use onChange instead of onClick.
i have this input filed in my code for serching the list i have 3 catagery of list which are displayed by three map() i want to input a name in the input fild and if it exist i want to show the firstname just like whatsapps serach works
<form style={{ display: "flex" }}>
<input
className="w-100 msserserch gradiantblur"
placeholder="seach messages"
onChange={(e) =>
this.setState({ serchinput: e.target.value })
}
type="Search"
/>
</form>
the map() are given below there are 3 i want when i type in input fild fistname mustbe filterd from this
{this.state.tablist == "doctor" ? (
<div
className="chat-avatar gradiantblur"
onClick={() => this.livechat(this.state.list.id)}
>
<div></div>
<div className="alignstart">
{this.state.list.firstname} {this.state.list.lastname}
<p className="margin-0">
{" "}
{this.state.list.speciality}
</p>
<p className="margin-0">
✓ {this.state.list.speciality}
</p>
</div>
<div>152:11</div>
</div>
) : this.state.tablist == "consultant" ? (
<>
<div className="scrollerchatlist">
{console.log(this.state.consulatnt)}
{this.state.consulatnt.map((data) => (
<div
className="chat-avatar gradiantblur"
onClick={() => this.livechat(data.id)}
>
<div>
</div>
<div className="alignstart">
{data.firstname} {data.lastname}
<p className="margin-0"> {data.speciality}</p>
<p className="margin-0">
✓ {data.firstname}
</p>
</div>
<div>152:11</div>
</div>
))}
</div>
</>
) : this.state.tablist == "sales" ? (
<>
<div className="scrollerchatlist">
{this.state.sales.map((data) => (
<div
className="chat-avatar gradiantblur"
onClick={() => this.livechat(data.id)}
>
<div>
</div>
<div className="alignstart">
{data.firstname}
<p className="margin-0">
</p>
</div>
<div>152:11</div>
</div>
))}
</div>
</>
) : null}
my code is big so i put it in codesandbox
https://codesandbox.io/s/intelligent-nova-v7pb1?file=/src/App.js
I see in your code, you have this.state.tablist which is deciding what to render when any tab gets selected. So whenever user types in the input, you can just filter out firstname string from all three array and render them in your list:
onChange={this.onSearchTextChange}
onSearchTextChange(event) {
const query = event.query.target;
if(query){
const dataSet = [this.state.sales, this.state.consultants, ...];
const filteredName = dataSet.map(
data => data.filter(row => row.firstName).filter(Boolean)
).flat();
// now set the state with this data
this.setState({...});
}
}
I am trying to make my some of my tab disable when editable is set to false:
Here is my following code:
const tabs = [
"Mission",
"Agreement",
"Calendar",
"Managers",
"Members",
"Invitees",
"Applicants",
];
<div className="team-management">
<div className="team-management-tabs-header">
<div className="team-management-tab-items">
{tabs.map((tab, index) => (
<div
className={
activeTab === index
? "team-management-tab-item selected"
: "team-management-tab-item"
}
key={tab}
role="button"
tabIndex={tab}
onKeyPress={() => {
return;
}}
onClick={() => setActiveTab(index)}
>
<span className="tab-item-text">{tab}</span>
<span className="tab-item-indicator" />
</div>
))}
</div>
</div>
<div className="team-management-tab-panes">
{tabs[activeTab] === "Mission" && (
<Mission
editable={editable}
teamId={teamId}
teamData={teamData}
fetchTeamData={fetchTeamData}
/>
)}
...
</div>
Here is how my page look like:
How can I add disabled to my div in this situation?
thank you for helping.
If editable was a state then you can conditionally choose to fire the setActiveTab() function (considering that is the function that enables your tab and you want it disabled ) based on the state of editable.
onClick={() => if(editable)setActiveTab(index)}
So i'm new to reactjs, im doing a table that when you click on 1 row it will render a detail description for that row. I have some button to trigger some event on that description table. But when i'm click the row on the table the description still render but the problem is, all the event in the descroption is trigger when i click on the row table not the button. Help pls
Here is my code:
const [displayCoursesDescription, setDisplayCoursesDescription] = useState({ coursesDescription: [] });
const handleCloseCoursesDescription = () => setDisplayCoursesDescription({ coursesDescription: [] });
const handleReloadCourse = () => {
setDisplayCoursesDescription({ coursesDescription: [] });
dispatchStudentCourses();
};
<div className="studentDashboardContent">
<div className="TableHeader">
<img className="courseIcon" src={courseActive} alt="courseActive" role="presentation" />
<p className="courseText">Courses</p>
<div className="ToolBar">
<OutlinedButton
icon={<ReloadOutlined style={{ width: '32px' }} />}
color={COLOR}
backgroundColor={BACKGROUND_COLOR}
display="inline"
onClick={handleReloadCourse}
/>
<SearchBox
placeholder="Search for courses"
color={COLOR}
backgroundColor={BACKGROUND_COLOR}
display="inline" // inline || none
/>
</div>
</div>
{courses && courses.status === API_STATUS.LOADING ? (
<LoadingIndicator />
) : (
<Table
className="studentTable"
columns={columns}
dataSource={coursesSource}
pagination={{ hideOnSinglePage: true }}
onRow={(record) => ({
onClick: (event) => {
setDisplayCoursesDescription({ coursesDescription: record });
getDepartmentById(record.department);
},
})}
/>
)}
</div>
{displayCoursesDescription.coursesDescription.key ? (
<div className="CourseDescription">
<div className="HeaderButton">
<a
href={displayCoursesDescription.coursesDescription.hostname}
className="courseUrl"
rel="noreferrer"
target="_blank"
>
<div className="forwardBtn" role="presentation">
<p className="forwardText">Go to course</p>
<img className="forwardImg" src={forward} alt="forward" />
</div>
</a>
<Button className="closeBtn" type="primary" icon={<CloseOutlined />} onClick={console.log('click1')} />
</div>
<div className="courseCodeName">
<p className="courseCode">{displayCoursesDescription.coursesDescription.code}</p>
<p className="courseName">{displayCoursesDescription.coursesDescription.name}</p>
</div>
<p className="departmentTitle">DEPARTMENT</p>
<div className="courseDepartment">
<img className="departmentImg" src={departmentIcon} alt="department" />
<p className="departmentName">{departments.name}</p>
</div>
<div className="courseDescription">
<p className="descriptionTitle">COURSE DESCRIPTION</p>
<p className="description">{displayCoursesDescription.coursesDescription.description}</p>
</div>
<Button className="unassignCourse" type="primary" danger onClick={console.log('click2')}>
Exit course <LoginOutlined />
</Button>
</div>
) : (
<div className="studentBackground">
<div className="dashboardContainer">
<p className="hiText">Hi {user.name}. How are you today?</p>
<img className="dashboardIMG" src={dashboardIMG} alt="dashboardimg" />
</div>
</div>
)}
Here is the console log that 2 onClick event were trigger when i click on the table Row
enter image description here