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)}
Related
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 want to find a div that has been rendered by react-date-range which has a className of rdrDateRangePickerWrapper and add another class to it. but currently, it's not working, is there any other way to do this?
this is the part of the code,
<div>
<i
role="button"
className="far fa-calendar-alt"
onClick={() => {
!openDistributionDatepicker && setOpenIngestDatepicker((prev) => !prev);
document
.getElementsByClassName("rdrDateRangePickerWrapper")
.classList.add(" another-class");
}}
/>
{openIngestDatepicker && (
<div className="z-intex999">
<DateRangePicker
onChange={(item) => setIngestDate([item.selection])}
showSelectionPreview={true}
moveRangeOnFirstSelection={false}
months={2}
ranges={ingestDate}
direction="horizontal"
/>
</div>
)}
</div>
Try below code:
document.querySelectorAll(".rdrDateRangePickerWrapper")
.forEach(element => element.classList.add('another-class'));
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.
How to convert column toggle from button list to select dropdown? Is it possible to do this?
I am using react-bootstrap-table-next.
const CustomToggleList = ({ columns, onColumnToggle, toggles }) => (
<div
className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
{columns
.map((column) => ({
...column,
toggle: toggles[column.dataField],
}))
.map((column) => (
<div>
<button
type="button"
key={column.dataField}
className={`btn btn-warning ${column.toggle ? "active" : ""}`}
data-toggle="button"
aria-pressed={column.toggle ? "true" : "false"}
onClick={() => onColumnToggle(column.dataField)}
>
{column.text}
</button>
</div>
))}
</div>
);
<CustomToggleList {...props.columnToggleProps} />
const CustomToggleList = ({ columns,onColumnToggle, toggles }) => (
<div className="text-center">
<div class="pull-left ">
<div class="btn-group pull-left ">
<button class=" btn-default dropdown-toggle custom-csv" data-toggle="dropdown">Columns</button>
<ul class="dropdown-menu customcolumn-scroll" >
{
columns.map(column => ({
...column,
toggle: toggles[column.dataField]
}))
.map((column, index) => (
<React.Fragment >
<label>
<input type="checkbox" key={column.dataField}
id={column.dataField}
checked={column.toggle}
aria-checked={column.toggle ? "true" : "false"}
onChange={() => onColumnToggle(column.dataField)} />
{column.text}
</label>
</React.Fragment>
))}
</ul>
</div>
</div>
</div>
);
I have a button in each of the 3 panels. I am looking at a dropdown message in that one panel where I clicked the button. But currently, when I click on one of the buttons, all 3 panels will show the dropdown message. I read about making use of indexing but I am not exactly sure how to add it in. How can I go about solving this?
export default class CustomerDetails extends Component {
constructor(props) {
super(props);
this.state = {
listOpen: false,
};
}
// Toggle the dropdown menu
toggleList(name) {
this.setState(prevState => ({
listOpen: !prevState.listOpen
}))
}
render() {
const { listOpen } = this.state
if (!this.state.customerDetails)
return (<p>Loading Data</p>)
return (<div className="customerdetails">
<div className="addmargin">
<div className="col-md-9">
{this.state.customerDetails.data.map(customer => (
<Panel bsStyle="info" key={customer.name}>
<Panel.Heading>
<Panel.Title componentClass="h3">{customer.name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
<br line-height="110%"></br>
<p align="left">{customer.desc}</p>
{/* Toggle dropdown menu */}
<div className="image-cropper">
<button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(customer.name)} /></button>
{listOpen && <ul className="dd-list">
<li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
</ul>}
</div>
You can do it like this. In your state declare a variable which points to index of the panel you want to show as:
this.state = {
listOpen: 0,
};
Then modify your toogleList method as:
toggleList(index){
this.setState({ listOpen: index })
}
And finally, change your JSX as:
{this.state.customerDetails.data.map((customer, index) => (
<Panel bsStyle="info" key={customer.name}>
<Panel.Heading>
<Panel.Title componentClass="h3">{customer.name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
<br line-height="110%"></br>
<p align="left">{customer.desc}</p>
{/* Toggle dropdown menu */}
<div className="image-cropper">
<button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(index)} /></button>
{listOpen === index && <ul className="dd-list">
<li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
</ul>}
</div>
</PanelBody>
<Panel>
}
Hope this works for you.
// Toggle the dropdown menu
toggleList(index) {
let customerDetails = this.state.customerDetails
if (customerDetails.data[index].listOpen)
customerDetails.data[index].listOpen = false
else
customerDetails.data[index].listOpen = true
this.setState({ customerDetails })
}
change this function like this
{
this.state.customerDetails.data.map((customer, index) => (
<Panel bsStyle="info" key={customer.name}>
<Panel.Heading>
<Panel.Title componentClass="h3">{customer.name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
<br line-height="110%"></br>
<p align="left">{customer.desc}</p>
{/* Toggle dropdown menu */}
<div className="image-cropper">
<button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(index)} /></button>
{customer.listOpen && <ul className="dd-list">
<li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
</ul>}
</div>