Hi was was wondering how to make a multi line component instead of an component with a self closing that for example so i can add taggs html insde the commonent but i that i can reuse the from component for multiple forms
<Form>
//Some text fields
</Form>
and the component
const Form = () => (
<form>
//Add here the tags inserted between the opening and closeing tag
</form>
)
export default From;
You just need to render the children.
const Form = ({children}) => (
<form>
//Add here the tags inserted between the opening and closing tag
{children}
</form>
)
export default Form;
For more, please refer JSX Components as mentioned by #Sergey Sosunov
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>.
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?
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>
)
Well I don't know if I am allow to post a question like this which is obviously more generic. But I just wanted to clarify and understand more about React reusable components. I have a component which holds information to open modals, and to insert user input.
I wanted to create the same component - when it comes to the design - but instead of having inputs and modals I just wanted to display information.
Is it possible for me to use the same visual component with different purposes such as to Input data and Visualize data? How would I do that since the input and the modal component uses logic and its internal state to open modals and uses methods from its parent to handleInputData? how do I switch these functionalities?
Yes, of course. It's the core feature of React, the declarative composition of components.
For instance, let's say that you have a Modal component which handles the display of something on the screen, above other content. You can use the props to customize what it renders right?
Them, you will specialize that component with your different behaviours, like a form or displaying information.
Example (conceptually):
const Modal = ({ title, children }) => (
<div className="modal">
<h1>{ title }</h1>
<div className="body">
{ children }
</div>
</div>
)
const FormModal = () => (
<Modal title="What's your name?">
<form>
{ /* your form here */ }
</form>
</Modal>
)
const AlertModal = () => (
<Modal title="Something happened">
{ /* your information to display here */ }
</Modal>
)
We are presenting dynamic error messages which are listed in a locale file as a const. As a part of that string, I am placing text [Alert] which I would like to replace with an imported alert component (which displays a nice alert etc).
How do I go about replacing part of a string in a const with a react component?
#KyLane , what about rendering the alert JSX inside the message Component as below ?
const renderAlert = () => (
<h1>this is an alert Component</h1>
)
const AlertMessage = ({ renderAlert }) => (
<div>
<p>This is a message<br/>
{renderAlert()}<br/>
End of the message
</p>
</div>
);
this is a link to codesandbox so you could try it.