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.
Related
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
I have to create react component having image and text box, so My task is to test
Image or Text box is Left or right aligned , as needed
Image or Text box is Top or bottom aligned, as needed
By passing input variant as textLeft or textRight
Example Component
Any Help?
If they both had the same aria-label or another selector you could use the getAllBy query which would give you an array of items in order they find them so then you could check the children by using within to query inside those.
Something like this would work.
const Component = () => {
return (
<>
<div aria-label="card">
<img alt="image example" />
</div>
<div aria-label="card">
<h1>This is heading</h1>
</div>
</>
)
}
import { render, screen, within } from '#testing-library/react'
test('React Testing Library works!', () => {
render(<Component />)
const cards = screen.getAllByLabelText('card')
expect(cards).toHaveLength(2)
expect(within(cards[0]).getByAltText('image example'))
expect(within(cards[1]).queryByAltText('image example')).not.toBeInTheDocument()
expect(within(cards[1]).getByText('This is heading'))
expect(within(cards[0]).queryByText('This is heading')).not.toBeInTheDocument()
})
I have a react component that renders the answers of a contact form and presents them in the page.
eg:
const Quote = ({fields}) => {
return (
<>
<div>
Business Type: {fields.businesstype.value}
</div>
....
</>
)
}
I need to send the rendered data to the php backend in order to send them as an email.
The question: Can I use the same component to get the rendered data (in a variable) and send them to backend (with axios)
Thank you for your time.
You can set ref to target Component (in this case Quote) and
use it like this:
ReactDOM.findDOMNode(quoteRef).innerHTML
to get rendered HTML code of that component
take a look at this
you can add ref to your component and have full access on that like this
const Quote = ({fields}) => {
const ref = React.useRef()
return (
<>
<div ref={ref}>
Business Type: {fields.businesstype.value}
</div>
....
</>
)
}
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>
)
Inside of my render function I have another function that is used as a defaultProp. This function maps over an array and returns multiple divs that are basically ways to write HTML for a CMS.
Here is what that function returns:
const renderElements = elementsArray
.map(
item => `<div class="explanation"><h1>${item.title}</h1>
<h2>${item.code}</h2>
</div>
<CopyToClipboard text=${item.code}>
<button>Copy</button>
</CopyToClipboard>
<div class="example">
${item.example}
</div>
`,
)
.join('');
return `${renderElements}`;
};
However, I have the CopyToClipboard package that is imported. I've tried surrounding the component with ${}, but I can't get the CopyToClipboard to be used within this template.