const Buttons = () => {
return (
<>
<div>
<button
buttonType="submit"
disabled={form.hasValidationErrors || form.pristine}
>
Save
</button>
</>
);
};
export default Buttons;
I have used react-final-form to create form for my react form. But I want to implement a seperate component for submit button. I need to have access to pristine but it gives me an error as there is not any form here in new component.
Does anyone have any solution?
Have you tried send the form as a parameter to the Buttons component?
Also, I think you were missing a closing div in your code.
const Buttons = ({form}) => {
return (
<>
<div>
<button
buttonType="submit"
disabled={form.hasValidationErrors || form.pristine}
>
Save
</button>
</div>
</>
);
};
export default Buttons;
As I use Typescript I do not know what is the type of form which i want to send it through props to my Buttons component. Also, II do not know if this is a right solution or not. Or does react-final-form has anything to help solving the issue?
Related
I have a common modal with a footer submit button. The modal is able to accept children.
const Modal = ({ children }: PropsWithChildren<Props>) => {
return (
<div>
{children}
<div>
<button type="submit">submit</button>
</div>
</div>
)
}
export default Modal
Usage
const CreateModal = (props: Props) => {
return (
<Modal>
<form>
<input name="test" />
</form>
</Modal>
)
}
export default CreateModal
Currently, that are a lot of files using the Modal component and I don't want to move the form tag in the modal.
My question is how can I modify the children in the common modal component? I want to append a hidden input inside the form so that I can submit the form when press Enter.
Wonder if using react cloneElement is able to solve my problem as I know it only can pass additional props to it.
I am using react hook form btw.
This is how I solve it.
<ModalBody display="flex" flexDirection="column">
<form onSubmit={onSubmit}>
{children}
<input hidden type="submit" />
</form>
</ModalBody>
I still need to edit all files but for future usage, I no need to include a hidden input for all files.
The only thing I worry is the FormProvider now is nested inside the form. By default the <FormProvider> should be the parent of the <form>.
I am creating a react website in which many pages have a specific button that should look the same for all. Should this button be its own component? If so, how would I specify the onClick events to be different for each button if it is a component?
Yes, it should be its own component.
Create it in a separate file so you can import them where you need to use.
The component should receive a onClick prop that you pass to the internal button tag.
See this example: https://reactjs.org/docs/components-and-props.html#composing-components
export const Button = ({ label, onClick, disabled }) => {
return (
<button
onClick={onClick}
disabled={disabled}
>
{label}
</button>
)
}
and then you can export this component inside any of the components you want, and pass in values like onClick and label to make it more dynamic
export const DemoFunction () => {
const onClickHandler = () => {}
return (
<Button label="Click" onClick={onClickHandler} />
)
}
Somewhat new to React.
I want to be able to toggle between React elements CreateUser, EditUser, and ListUser.
It would be great to have a clickable text that when selected pulls up that element and its
corresponding stuff. In the case of Create its a field with a save button.
What is the best way to have my CrudSelector class list all three texts, make them clickable and pull up the stuff inside toggling to the selected one at a time?
Welcome. Always a good idea to share code with your question.
You'll want to use some kind of state which tells your parent component which child component to show. Kind of like this in your React functional component:
const [ featureToShow, setFeatureToShow ] = useState('list')
return (
<>
{/* Show some buttons to change the state */}
<button onClick={() => setFeatureToShow('list')}>Show User List</button>
<button onClick={() => setFeatureToShow('create')}>Create User</button>
<button onClick={() => setFeatureToShow('edit')}>Edit User</button>
{/* Depending on what is in the state show that component */}
{ featureToShow === 'list' ? <ListUser /> : null }
{ featureToShow === 'create' ? <CreateUser /> : null }
{ featureToShow === 'edit' ? <EditUser /> : null }
</>
)
In reality you'll probably want to enable clicking on the user's name in ListUser to show the EditUser component.
I am pretty new to ReactJS. I have created a Form that accepts a two inputs and has a button that invokes the onclick() function. I want to display a simple message like "Action complete" below the Form when the onclick() function is complete. I don't want to use alert, but display the message on the webpage itself.
What is the best way to do this?
You can either create an element with JS and append it to the form body or you can have an invisible div/p/whatever element that gets his text modified inside the onclick function and its css class/css style too so that it appears. If you need specific code solutions you can paste your code here :)
You may want to look into state hooks with react, they are found here
https://reactjs.org/docs/hooks-state.html
It sounds like you may want something similar to the following;
const Search = () => {
const [showResults, setShowResults] = React.useState(false)
const onClick = () => setShowResults(true)
return (
<div>
<input type="submit" value="Search" onClick={onClick} />
{ showResults ? <Results /> : null }
</div>
)
}
const Results = () => (
<div id="results">
Some Results
</div>
)
How come the following React Button Emitter is not working? It should display the word Apple, with button click.
function App() {
return (
<div>
<button onClick={handleClick('apple')}>
Test Button
</button>
</div>
)
}
function handleClick(props) {
console.log(props)
}
In order for it to get called on click you need to pass a function. Right now your code is invoking the function:
function App() {
return (
<div>
{/* Creates an anonymous function that calls `handleClick` */}
<button onClick={() => { handleClick('apple'); }}>
Test Button
</button>
</div>
)
}
By doing onClick={handleClick('apple')} what you are doint is to put the result of handleClick('apple') at rendering time, not onClick time.
onClick={() => handleClick('apple')} will work because you are creating a function and assign it to onClick, without executing it yet.
This is how React works, because what you are writing is actually just javascript (not html, even if it looks like so).
Your way would instead be perfectly ok if you were using Vue, for example, because in that case you are working in an html template (unless you don't want to use jsx..)