I'm trying to use ui headless radio-group
as button group so I want all my button
in a single column and multiple rows
but with this code
<div className="h-40 bg-red-300">
<RadioGroup value={selected} onChange={setSelected}>
<RadioGroup.Label>Options</RadioGroup.Label>
<div className="flex gap-3">
{options.map((option) => (
<RadioGroup.Option value={option} key={option}>
{({ checked }) => (
<button type="button" className={checked ? 'bg-blue-200 relative' : 'relative'}>
{option}
</button>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
all the buttons disappear.
What's the problem?
Worked it out with
<button type="button" className={`relative z-50 ${checked ? 'bg-blue-200' : ''}`}>
{option}
</button>
Related
I am using ANTD React UI library.
<Modal
width="1100px"
centered
footer={null}
title={
<div className="d-flex align-items-center">
<div className="flex-grow-1">Record Profiles</div>
<div className="mr-4">
<Button
htmlType="submit"
type="primary"
onClick={() =>{this.SaveData(this.form.getFieldValue())}}
icon={<SaveOutlined />}
className="save_btn"
loading={this.state.saving}>
</Button>
<Button
onClick={() => { this.props.onCancel() }}
htmlType="button"
type="primary"
className="cancel_btn ml-2"
icon={<CloseCircleOutlined />}>
</Button>
</div>
</div>
}
visible={true}
closable={false}
okText="Yes"
cancelText="No"
maskClosable={false}
>
<Form
autoComplete="off"
layout="horizontal"
ref={(r) => this.form = r}
initialValues={this.props.record}
onFinish={this.SaveData}
>
.
.
.
</Form>
</Modal>
I want to call the save and close buttons on top of the side of the title. It is displaying correctly, but due to outside form functionalities don't work because the form values don't get outside. Is there any method to get the values outside or form submit?
I have these two buttons inside my Formik form. Issue is when I hit enter it is clicking on my "Back" button despite it does not have type="submit".
<Formik
initialValues={initialState}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ errors, touched, handleChange, setFieldValue, values }) => (
<Form>
<div className="field-block field-items mb-4">
<label>
Title <span className="required">*</span>
</label>
<div className="input-block">
<Field
className={touched.title && errors.title ? "error" : ""}
name="title"
type="text"
placeholder="Add a title"
/>
</div>
</div>
<div className="col-md-6">
<div className="button-container large-btn text-md-end text-center">
<button onClick={backFunction} className="btn-s-one">
Back
</button>
<button type="submit" className="btn-s-one fill ms-2">
Continue
{props.loder == false ? (
""
) : (
<Spin
size="large"
indicator={
<LoadingOutlined
style={{ fontSize: 50, color: "#000", marginLeft: 50 }}
spin
/>
}
className="loader__full"
></Spin>
)}
</button>
</div>
</div>
</Form>
)}
</Formik>;
Form Buttons in React.js are submit buttons by default. You need to change your back button code by the following.
<button type="button" onClick={backFunction} className="btn-s-one">
Back
</button>
How can I modify my code in order to get a dynamic +Add Invitee button which will move down the last section each time you add fields? For now, it appears above all blocks.
export default function App() {
const [menu, setMenu] = useState("");
return (
<>
<button type="button" onClick={addInvitee}>
+Add Invitee
</button>
<form onSubmit={handleSubmit}>
{invited.map(({ age, email, id, location, name }, index) => (
<div key={id}>
<div className="grid grid-cols-3 gap-5">
<label className="mr-3 h-6 text-md font-bold">
Names:
<input
type="text"
value={name}
placeholder="Names"
name="name"
onChange={updateInvitee(id)}
/>
</label>
...
{!!index && (
<button type="button" onClick={() => removeInvitee(id)}>
Remove
</button>
)}
</div>
</div>
))}
</form>
</>
);
}
Here is my:
code
To achieve that you just need to take the button down under the form.
export default function App() {
const [menu, setMenu] = useState("");
return (
<>
<form onSubmit={handleSubmit}>
{invited.map(({ age, email, id, location, name }, index) => (
<div key={id}>
<div className="grid grid-cols-3 gap-5">
<label className="mr-3 h-6 text-md font-bold">
Names:
<input
type="text"
value={name}
placeholder="Names"
name="name"
onChange={updateInvitee(id)}
/>
</label>
...
{!!index && (
<button type="button" onClick={() => removeInvitee(id)}>
Remove
</button>
)}
</div>
</div>
))}
</form>
<button type="button" onClick={addInvitee}>
+Add Invitee
</button>
</>
);
}
also you can style the button or wrap it with a div for more complex styling to achieve the example from the photo you shared.
here is alink for a working example: codesandbox
I want a modal to open when I click on an info circle on the product info button. I can't figure out how to do this in react after the export default statement.
The export default is important to other events in my code so I wanted to keep that as it is.
export default ({ product, addToBasket, removeFromBasket, openModal}) => {
return (
<div className={styles.tile}>
<div className={styles.tileGrid}>
<div className={styles.imageContainer}>
<FontAwesomeIcon icon={faCamera} />
</div>
<h3 className={styles.shortDescription}>{product.shortDescription}</h3>
<p className={styles.price}>£{product.price}</p>
{product.quantity && (
<p className={styles.quantity}>Quantity: {product.quantity}</p>
)}
{
<div className={styles.modal} onClick={() => openModal(product)}>
<FontAwesomeIcon icon={faInfoCircle} /> Product Info
</div>}
{addToBasket && (
<button className={styles.cta} onClick={() => addToBasket(product)}>
<FontAwesomeIcon icon={faShoppingBasket} /> Add to Basket
</button>
)}
{removeFromBasket && (
<button
className={styles.secondaryButton}
onClick={() => removeFromBasket(product)}
>
Remove from Basket
</button>
)}
</div>
</div>
);
};
Have used the following link but can't get it working in my code: https://www.pluralsight.com/guides/how-to-trigger-modal-for-react-bootstrap
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.