// 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>
Related
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?
<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.
In this project I am using FireBase database. I need to change the number of users per page for example 5, Change the number of pages according to the total number of users / number of users per page. To do this, I change the query params, but it does not want to change. I don't know how to enter the parameters correctly so that they appear to me as they should, maybe I didn't write them correctly or I need to write them differently
import React, {Component} from "react";
import classes from "./users.module.css";
import * as axios from "axios";
import userPhoto from "../../assect/image/standartAvatar.jpg";
class Users extends Component {
componentDidMount() {
axios
.get(
`https://kabzda-cff30-default-rtdb.europe-west1.firebasedatabase.app/users.json?page=${this.props.currentPage}&count=${this.props.pageSize}`
)
.then((response) => {
this.props.setUsers(response.data.items);
this.props.setTotalUsersCount(response.data.totalCount);
})
}
onPageChanged = (pageNumber) => {
this.props.setCurrentPage(pageNumber)
axios
.get(
`https://kabzda-cff30-default-rtdb.europe-west1.firebasedatabase.app/users.json?page=${pageNumber}&count=${this.props.pageSize}`
)
.then((response) => {
this.props.setUsers(response.data.items);
})
}
render() {
let pagesCount = Math.ceil(this.props.totalUsersCount / this.props.pageSize)
let pages = [];
for(let i = 1; i <= pagesCount; i++){
pages.push(i)
}
return (
<div>
<div className={classes.counter}>
{pages.map(p => (
<span className={(this.props.currentPage === p && classes.selectedPage) || classes.pointer}
onClick={() => {this.onPageChanged(p)}}
>
| {p} |</span>
))}
</div>
{this.props.users.map((u, i) => (
<div key={i+1}>
<span>
<div>
<img
src={u.photos.small !== "" ? u.photos.small : userPhoto}
className={classes.userPhoto}
alt="avatar"
/>
</div>
<div>
{u.followed ? (
<button
onClick={() => {
this.props.unfollow(u.id);
}}
>
UnFollow
</button>
) : (
<button
onClick={() => {
this.props.follow(u.id);
}}
>
Follow
</button>
)}
</div>
</span>
<span>
<span>
<div>{u.name}</div>
<div>{u.status}</div>
</span>
<span>
<div>{"u.location.country"}</div>
<div>{"u.location.city"}</div>
</span>
</span>
</div>
))}
</div>
);
}
}
export default Users;
I've been making a website to showcase my personal photography, and I've been getting my photos from Google Photos, using their features. (There's a medium post on how to do this)!
However, one problem I have been having is with scaling. I would like my images to be as quality as possible but also at a small enough size for them to fit into a grid on my page. However, when I use the built in parameters to do this (according to the docs) scaling is not preserved!
Example:
My page's code is as follows:
const axios = require('axios');
const Image = require('next/image');
const _ = require('lodash');
export default function Home({ pictures }) {
return (
<div>
<div className="hero min-h-screen" style={{ backgroundImage: 'url(https://lh3.googleusercontent.com/wwilPCF5L98Osl7_HVohVi34EP4SHUNKbxCe-fBooyNcTdvAWawcP3paqGxvAW3gCzXBl4aQOT_oxwYuXXaMG3ICM7cOkWJH6eYcozUqr9agShnjQu8kWFsPxtL7WD7H5sF5rkR9Vdk=w2048)' }}>
<div className="hero-overlay bg-opacity-60" />
<div className="hero-content text-center text-neutral-content">
<div className="max-w-md">
<h1 className="mb-5 text-5xl font-bold">Photography</h1>
<p className="mb-5">Aside from programming, I also love photography! </p>
</div>
</div>
</div>
<div className="flex flex-col flex-wrap m-10">
<div className="flex flex-row basis-1 flex-wrap m-4">
{
pictures.map(((x) => (
<img src={`${x}`} alt="Hello." key={`${x}?`} className=" flex-col flex-auto m-3 rounded-md shadow-md" />
)))
}
</div>
</div>
</div>
);
}
export async function getServerSideProps({ req, res }) {
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
const regex = /\["(https:\/\/lh3\.googleusercontent\.com\/[a-zA-Z0-9\-_]*)"/g;
function extractPhotos(content) {
const links = new Set();
let match;
while (match = regex.exec(content)) {
links.add(match[1]);
}
return Array.from(links);
}
async function getAlbum(id) {
const response = await axios.get(`https://photos.app.goo.gl/${id}`);
const photos = _.shuffle(extractPhotos(response.data));
return photos;
}
const pictures = await getAlbum('ZbGaHdrs62q5Jyrk8');
return {
props: { pictures }, // will be passed to the page component as props
};
}
How can I ensure the images are properly scaled? Is this even possible? Will I need some CSS trick? Thanks!
while searching, the results should appear as a div like below :
i use jquery to search in table,how to get the result like above.
my component code is:
<div id="modaldash" style={{ display: (searching ? 'block' : 'none') }}>
<p className="font-weight-medium" id="name"> <img id="logo" className="logo" src={jessica} alt="pam-logo" /> Jessica James </p>
<button id="Addlist" onClick={this.onSubmitdata} className="btn info">{this.state.shown ? "Addded" : "Add to list"}</button>
<p id="mailid">jessicajames#gmail.com </p>
<p id= "address">Mountain view,Ave</p>
</div>
its just a static content for css. how to use search and get results like above.
export default function App() {
// considering the data object to search on name
const [searchedData, setSearchedData] = useState([]);
const users = [
{
name: "abc1",
emailid: "abc1#gmail.com",
address: "23rd main, 2nd street"
},
{
name: "adb2",
emailid: "abc2#gmail.com",
address: "23rd main, 2nd street"
},
{
name: "adc3",
emailid: "abc3#gmail.com",
address: "23rd main, 2nd street"
}
];
const handleSearch = event => {
const data = users.filter(
user => user.name.indexOf(event.target.value) !== -1
);
setSearchedData(data);
};
const showSearchedData = () => {
return searchedData.map(user => (
<div key={user.emailid}>
<p className="font-weight-medium" id="name">
{" "}
<img id="logo" className="logo" src="" alt="pam-logo" />
{user.name}
</p>
<button id="Addlist"> Added/ add to list</button>
<p id="mailid">{user.emailid} </p>
<p id="address">{user.address}</p>
</div>
));
};
return (
<div className="App">
<input type="text" onChange={handleSearch} />
<div id="modaldash">{searchedData.length > 0 && showSearchedData()}</div>
</div>
);
}
You can add CSS to make a look and feel like shown in image attached.
Check the working example here https://codesandbox.io/s/falling-sun-r3rim