I want to inject some css only for the child of the button, but since I am using this syntax to render a group of buttons, can be 1 or 2, I am not sure how to write this properly
this is my code below
const renderChildren = (children: React.ReactElement[]) => {
return children.map((child: React.ReactElement, index) => ({ ...child, key: index }));
};
const GenericPageComponent: React.FC<GenericPageProps> = ({
imageChildren,
headingChildren,
textChildren,
buttonChildren,
}) => {
return (
<div className={styles.main}>
<div className={styles.wrapper}>
<div className={styles.title}>{headingChildren}</div>
{textChildren && <div className={styles.paragraph}>{renderChildren(textChildren)}</div>}
<div className={styles.btn}>{renderChildren(buttonChildren)}</div>
</div>
what do I change here?
Related
<div class="mysel">
<button class="btn"></button>
<div class="iconName">James</div>
</div>
<div class="mysel">
<button class="btn"></button>
<div class="iconName">John</div>
</div>
I want to click the button by codition of James
so I try to use selector by this
page.locator('button:right-of(:text("james")').click();
but fail
how I could choice the button by txt in the next div?
There's not much context to work from here, and the -of selectors seem dependent on CSS/layout information I don't have, but selecting based on .mysel's text works for your example:
const playwright = require("playwright"); // ^1.28.1
const html = `
<div class="mysel">
<button class="btn">GOT IT</button>
<div class="iconName">James</div>
</div>
<div class="mysel">
<button class="btn"></button>
<div class="iconName">John</div>
</div>
`;
let browser;
(async () => {
browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.setContent(html);
const sel = '.mysel:has(:text("james")) button';
console.log(await page.locator(sel).textContent()); // => GOT IT
})()
.catch(err => console.error(err))
.finally(() => browser?.close());
'.mysel:has(.iconName:text("james")) .btn' is also possible in case there are other elements and you need to be more specific.
// I am trying to print out the database elements to react typescript home page, but when i print // it out it prints out
// [Object] [Object].
function HomePage(){
const [games, setGames] = useState< IGame []>([]);
useEffect(() => {
GameService.GetAllGames().then((data) => setGames(data));
}, []);
function onClickCreateADivWithGamesInfromation(){
const div = document.createElement('div');
const informationAboutGames = document.createElement('information');
informationAboutGames.innerText = `
${games.map((game, index) => {
return <GamesItem key={index} {...game} />
})}`;
JSON.stringify(informationAboutGames);
div.appendChild(informationAboutGames);
document.body.appendChild(div);
}
return(
<div>
<header>
<h1 className='text-center mb-5 '>Electric games</h1>
</header>
<br />
<main>
<div className='text-center'>
<h3 className='text-center'>Show all games</h3>
<button className='btn btn-primary' onClick={onClickCreateADivWithGamesInfromation} >Show all</button>
</div>
This is a simplified React component that uses helmet to update the link css on runtime:
function App() {
const [brand, setBrand] = useState('nike')
return (
<div className="App">
<Helmet>
<link rel="stylesheet" href={getBrandStyle(brand)} />
</Helmet>
<div>other contents here</div>
<!-- omitted the button components that change the brand state by calling setBrand -->
</div>
);
}
I have recently just used react-helmet as a declarative way to change the head tag's child and with the code I wrote above, when switching the css there is momentary lag when the page has no css stylings and then 1 second later the updated css shows up.
Even during the initial load of the page, if I use queryParameters (code above doesn't show the query parameter approach) such as
https://localhost:3000?brandQueryParam=nike
there is 1 second wherein there is no css styling before the brand css shows up.
Can you please let me know what I am missing and how to resolve this?
This is the solution that I came up with, not sure if setTimeout is the best solution so if anyone else knows a better way, please share it.
const brands = {
nike: 'nike2022',
adidas: 'adidas2017',
fila: 'fila2020'
};
function App() {
const [brand, setBrand] = useState('nike')
const [isLoading, setIsLoading] = useState(false)
const changeBrandStyleOnClick = (brand) => {
setBrand(brand)
setIsLoading(true)
}
return (
<div className="App">
<Helmet>
<link rel="stylesheet"
onChangeClientState={(newState, addedTags, removedTags) => setTimeout(() => setIsLoading(false), 1500)}
href={getBrandStyle(brand)} />
</Helmet>
{isLoading && (
<Overlay>
<Spinner/>
</Overlay>
)}
{!isLoading && (
<>
{Object.keys(brands).filter(b => b !== brand).map(b =>
(<Button onClick={() => changeBrandStyleOnClick (b)} value={b}>
<Logo
alt="default alt name"
appearance="default"
name={b}
size="small"/>
</Button>))
}
<div>other contents here</div>
</>
)}
</div>
);
}
I am building a website using reactjs. I have a js file which extract props from another file which is an array called sections with data like title and imageurl. I need to use the prop of imageuURL as a background for each element. I tried to use style but it doesn't work.
Here is the code of extracting :
import React from 'react'
const Menuitem = (props) => {
return(
<div>
<h1 className='title'>{props.title}</h1>
<span className='subtitle'>shop now</span>
</div>
)
}
I pass that code through array in app.js using the following function:
function extract(item) {
return <Menuitem title={item.title}/>
}
Then use map function to return result
function App() {
return (
<div className=''>
{sections.map(extract) }
</div>
);
}
The result I get is like the image. I need to get a background image for each section from the array file
( imageURl prop )
react js problem
If the imageURL is inside the props passed to the menu item you can just put it in inline
const Menuitem = (props) => {
return(
<div style={{ backgroundImage: `url(${props.imageUrl})` }}>
<h1 className='title'>{props.title}</h1>
<span className='subtitle'>shop now</span>
</div>
)
}
Using react-typeahead-component
I used browserify to change it from npm into a meteor local package. Nothing is showing on the screen when i run meteor.
OptionTemplate.jsx
module.exports = React.createClass({
render: function() {
return (
<div>
<p>HELLO</p>
</div>
);
},
handleChange: function(event) {
console.log('HELLO');
}
});
main.jsx
var OptionTemplate = require('./OptionTemplate.jsx');
SearchBox = React.createClass({render() {
return (
<div className="col-xs-12 col-lg-12">
<OptionTemplate />
</div>
)}
});
You aren't using components properly. You might want to re-read the react documentation.
In your main.jsx, you are importing the component 'OptionTemplate' but you are trying to render the component 'Typeahead' and passing in 'OptionTemplate' as a prop. The 'Typeahead' component now lives in 'OptionTemplate'. Your main.jsx should like like:
var OptionTemplate = require('./OptionTemplate.jsx');
SearchBox = React.createClass({render() {
return (
<div className="col-xs-12 col-lg-12">
<OptionTemplate />
</div>
)}
});