Develop Reference

React- Image is not visible in Styled Component

I am actually trying to make a Card with Image as a background.
I am doing it using styled components by passing {imgurl} as a prop but it is not loading.
This is my App.Js
import React from "react";
// import NavBar from "./NavBar";
import DestCard from "./Card";
import { Grid } from "#mui/material";
// import MidPage from "./Midpage";
const cardInfo = [
{
image: "https://upload.wikimedia.org/wikipedia/commons/b/bf/LeBron_James_-_51959723161_%28cropped%29.jpg",
title: "Lebron James",
text: "THE GOAT",
},
{
image: "https://upload.wikimedia.org/wikipedia/commons/a/aa/TechCrunch_Disrupt_2019_%2848834853256%29_%281%29.jpg",
title: "Stephen Curry",
text: "3 pointer GOD",
},
{
image: "https://upload.wikimedia.org/wikipedia/commons/b/bf/LeBron_James_-_51959723161_%28cropped%29.jpg",
title: "Lebron James",
text: "THE GOAT",
},
{
image: "https://upload.wikimedia.org/wikipedia/commons/a/aa/TechCrunch_Disrupt_2019_%2848834853256%29_%281%29.jpg",
title: "Stephen Curry",
text: "3 pointer GOD",
}
];
function App() {
return (
<div>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{cardInfo.map((details, index) => (
<Grid item xs={2} sm={4} md={4} key={index}>
<DestCard details={details.image} />
</Grid>
))}
</Grid>
</div>
)
}
export default App;
This is Card.Js
import * as React from 'react';
import { StyledCard, CardImage } from './Card.style.js';
function DestCard({imgurl}) {
return(
<StyledCard>
<CardImage bg= {imgurl}>
</CardImage>
</StyledCard>
)
}
export default DestCard;
This is the styling file
import styled from "styled-components";
export const StyledCard= styled.div`
display: flex;
width: 100px;
height: 100px;
overflow: hidden;
box-shadow: 0px 0px 15px -5px;
`
export const CardImage= styled.div`
/* grid-area: image; */
/* display: flex; */
background-image: url(${({bg}) => bg});
width: 60px;
/* background-size: cover; */
`
I have used the props in Styled Components available here props in styled component
This is the output
If someone could resolve this it would be really helpful. Thankyou

In React, whatever name you are passing from parent component should be used in child component.
eg:- you are passing it as details in parent component <DestCard details={details.image} /> so it should be received as function DestCard({details})
in child component
The below code should work
import * as React from 'react';
import { StyledCard,CardImage } from './Card.style.js';
function DestCard({details}) {
return(
<StyledCard>
<CardImage bg= {details}>
</CardImage>
</StyledCard>
)
}
export default DestCard
Please add appropriate height and width to image properties to view the image in the card

Wix React Native Navigation TopBar buttons can't override in android

I used setDefaultOptions in react-native-navigation to set a global topbar button on the right side using rightButtons property.
But on some screens, I want to override that global button and set a new button. So I used mergeOptions method inside the component that I want the new button on the topbar.
It works only on iOS but on android. I tried different ways to fix this issue. But couldn't find any solution.
To demonstrate let's imagine the global button is Notification. Also let's imaging I'm gonna use that in many screens except Profile Screen. Please check the below images.
The first two images are from android. Third one is from iOS. You can see on android Profile Screen has notification button on the topbar. It should be Edit button just like in iOS.
Image: 1
Android: 1
Image: 2
Android: 2
Image: 3
iOS: 1
Here is my code.
index.js
import { Navigation } from "react-native-navigation";
import App from './App';
import Notification from "./src/components/Notification";
import Profile from "./src/screens/Profile";
const defaultNavigationOptions = {
topBar: {
rightButtons: [{
id: 'com.myApp.Notification',
component: {
id: 'com.myApp.Notification',
name: 'com.myApp.Notification'
}
}],
}
}
Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
Navigation.registerComponent('com.myApp.Profile', () => Profile);
Navigation.registerComponent('com.myApp.Notification', () => Notification);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions(defaultNavigationOptions);
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
id: 'HOME_TAB',
children: [{
component: {
id: 'com.myApp.WelcomeScreen',
name: 'com.myApp.WelcomeScreen',
},
}],
options: {
bottomTab: {
text: 'Home'
}
}
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [{
component: {
id: 'com.myApp.Profile',
name: 'com.myApp.Profile',
},
}],
options: {
bottomTab: {
text: 'Profile'
}
}
}
}
]
}
}
})
});
Profile.js
import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect } from 'react'
import { Navigation } from 'react-native-navigation'
const Profile = (props) => {
useEffect(() => {
Navigation.mergeOptions(props.componentId, {
topBar: {
rightButtons: [{
id: 'edit',
text: 'Edit'
}]
}
})
}, [])
return (
<View>
<Text>Profile</Text>
</View>
)
}
const styles = StyleSheet.create({})
export default Profile;
I tried Profile.options = {} method as well. But no luck.
I'm using:
react-native-navigation: 7.28.1
react-native: 0.64.2

Vue3- [Provide and Inject] when data changes ,not do visual update ,I use filter( ) to del an item in array

I am test provide and inject method. I put datas, del-function in parent to provide, I put dynamic render in child using v-for='data' in datas...
The goal I want to implement is: when I press the "delete button"=>del-function in child, then datas in parent get an item deleted , and datas in parent provide get updated.
Then child get new datas to do visual update. v-for re-render. [!!!]
But when I press the "delete button" , datas updated ,but visually ,no one get deleted.
v-for rendered cards
// parent vue file
<template>
<Reslist/>
</template>
<script>
import Reslist from './components/ResList.vue'
export default {
name: "App",
components: {
Reslist
},
provide() {
return {
datas: this.datas,
delData: this.delData,
};
},
data() {
return {
datas: [
{
id: 1,
name: "wawa",
age: "18",
},
{
id: 2,
name: "wmmmfwa",
age: "1128",
},
],
};
},
methods: {
delData(id) {
console.log('delete-id ='+ id);
const newDatas = this.datas.filter( element => element.id !== id);
this.datas = newDatas;
console.log( this.datas);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
// child vue file
<template>
<div v-for='data in datas' :key="data.name">
<h2>{{data.name}}</h2>
<p>{{data.age}}</p>
<button #click='delData(data.id)'>delete</button>
</div>
</template>
<script>
export default {
inject:['datas','delData']
}
</script>
<style scoped>
div{
width: 18.75rem;
margin: 1.25rem auto;
border: solid 1px grey;
padding: 1.25rem;
}
</style>
I know how to use prop to pass data to child. I just want to know why [provide and inject] don't work?? In [provide],I already [datas = this.datas] , does my logic have mistakes?

Good night, Bro!
I found a solution using computed props...
Hope its helpful!
Parent Vue File
<template>
<Reslist/>
</template>
<script>
import Reslist from './ResList.vue'
import { computed } from '#vue/reactivity'
export default {
name: "App",
components: {
Reslist
},
provide() {
return {
datas: computed(() => this.datas),
delData: this.delData,
};
},
data() {
return {
datas: [
{
id: 1,
name: "wawa",
age: "18",
},
{
id: 2,
name: "wmmmfwa",
age: "1128",
},
],
};
},
methods: {
delData(id) {
console.log('delete-id ='+ id);
const newDatas = this.datas.filter( element => element.id !== id);
this.datas = newDatas;
console.log(this.datas);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Child File
<template>
<div v-for='data in datas' :key="data.name">
<h2>{{data.name}}</h2>
<p>{{data.age}}</p>
<button #click='delData(data.id)'>delete</button>
</div>
</template>
<script>
export default {
inject:['datas','delData']
}
</script>
<style scoped>
div{
width: 18.75rem;
margin: 1.25rem auto;
border: solid 1px grey;
padding: 1.25rem;
}
</style>
Configuring Main.js To Accept Computed prop.
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.unwrapInjectedRef = true
app.mount('#app')
The information for this config : https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity

Your injected data is not working in a reactive way, and per the Vue.js Documentation, in order for injected data to do this, you must provide it as a computed property by wrapping it in a computed() function:
Which states:
Working with Reactivity
In order to make injections reactively linked to the provider, we need to provide a computed property using the computed() function
In your case, it might look like this:
provide() {
return {
datas: computed(() => this.datas),
delData: this.delData,
};
},
Having said this, Vue is always undergoing updates, enhancements and fixes, and in order for this to work fully, temporarily, you must add an additional config to your application:
Which states:
Temporary Config Required
The above usage requires setting app.config.unwrapInjectedRef = true to make injections automatically unwrap computed refs. This will become the default behavior in Vue 3.3 and this config is introduced temporarily to avoid breakage. It will no longer be required after 3.3.
In code, this could look like so:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App);
app.config.unwrapInjectedRef = true;
app.mount('#app')

How to get react jsx "to: "/profile"" to redirect and load the profile page?

throughout my app I am using reach router to handle navigation between my pages.
However, I found a navbar component that I enjoy and brought it into my app. I am not sure why, but the "to: "/profile"" button does not actually navigate and load my http://localhost:3000/profile page.
It does change the html address to show http://localhost:3000/profile, but it does not redirect and load the profile page. I have to refresh the browser for it to do so.
Any ideas on how to get this "My Profile" button to actually redirect and load the profile page? Could I use reach router "navigate(/"profile")" in this syntax? It doesn't seem to fit when I try. Thanks!
Navbar.js
import { BorderStyle } from "#material-ui/icons";
import React from "react";
import * as ReactNavbar from "react-responsive-animate-navbar";
import Logo from "../Assets/Media/ToolioLogoSmall.png"
import { navigate, Link } from "#reach/router"; //not using this currently, but it is used for navigation throughout the rest of my app.
export default function Navbar() {
console.log(ReactNavbar.ReactNavbar)
return (
<div style={style.background}>
<ReactNavbar.ReactNavbar style={style.background}
color="rgb(25, 25, 25)"
logo={Logo}
menu={[
{ name: "HOME", to: "/Explore" },
{ name: "ARTICLES", to: "/articles" },
{ name: "My Profile", to: "/profile" },
{ name: "CONTACT", to: "/contact" },
]}
social={[
{
name: "Linkedin",
url: "https://www.linkedin.com/",
icon: ["fab", "linkedin-in"],
},
{
name: "Facebook",
url: "https://www.facebook.com/",
icon: ["fab", "facebook-f"],
},
{
name: "Instagram",
url: "https://www.instagram.com/",
icon: ["fab", "instagram"],
},
{
name: "Twitter",
url: "http://www.twitter.com/",
icon: ["fab", "twitter"],
},
]}
/>
</div>
);
}

Well, I saw the package you have used:
import * as ReactNavbar from "react-responsive-animate-navbar
found that you are using the provided sample code of this package.
the "menu" here is used for the presentational purpose, I don't think the package has used it as a router link or navlink.
Wrap each of the menu objects as NavLink something like this:
menu={[
{ name: "HOME", to: "/Explore" },
{ name: "ARTICLES", to: "/articles" },
{ name: "My Profile", to: "/profile" },
{ name: "CONTACT", to: "/contact" },
]}
try this instead:
menu={[
{ name: "HOME", to: {<Link to="/explore"/>} },
{ name: "ARTICLES", to: {<Link to="/articles"/>} }
]}
or you can use navlaink too.

#Tina
I appreciate you taking the time to respond!! I implemented the snipped you suggested but it looks like the syntax is off for some reason. I also installed and imported react-router-dom and used .
Here is the current code shown in the image below. Any ideas on getting your suggestion to work? I assume the end solution here will be some sort of workaround.
import { BorderStyle } from "#material-ui/icons";
import React from "react";
import * as ReactNavbar from "react-responsive-animate-navbar";
import Logo from "../Assets/Media/ToolioLogoSmall.png"
import { Auth } from "aws-amplify";
import { navigate } from "#reach/router";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function Navbar({ setSignedIn }) {
console.log(ReactNavbar.ReactNavbar)
return (
<Router>
<div style={style.background}>
<ReactNavbar.ReactNavbar style={style.background}
color="rgb(25, 25, 25)"
logo={Logo}
menu={[
{ name: "Home", to: {<Link to="/explore"/>} },
{ name: "My Profile", to: {<Link to="/articles">} },
{ name: "About Us", to: {<Link to="/AboutUs"/>} },
]}
social={[
{
name: "Linkedin",
url: "https://www.linkedin.com/",
icon: ["fab", "linkedin-in"],
},
{
name: "Facebook",
url: "https://www.facebook.com/",
icon: ["fab", "facebook-f"],
},
{
name: "Instagram",
url: "https://www.instagram.com/",
icon: ["fab", "instagram"],
},
{
name: "Twitter",
url: "http://www.twitter.com/",
icon: ["fab", "twitter"],
},
]}
/>
<button
style={style.signouticon}
onClick={() => {
(async function () {
try {
await Auth.signOut({ global: true });
setSignedIn(undefined);
navigate("/");
} catch (error) {
console.log(error);
}
})();
}}
>
sign out
</button>
</div>
</Router>
);
}
const style = {
background: {
backgroundColor: "black",
borderStyle: "10px black"
},
};

Adding navbar buttons to react-native-navigation while using react-native-meteor

I'm using react-native-navigation in combination with react-native-meteor. Since Meteor 1.3 it's recommended to use createContainer method when using React. However, if I remove 'export default' from class definition and move it to export default createContainer(params=>{...}, MyClass), I loose definition of nav bar buttons. How I should write it to not loose definition of my nav bar buttons? Thanks :)
Here is the whole code of my component:
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
} from 'react-native';
import Meteor, { createContainer } from 'react-native-meteor';
class TestScreen extends Component {
static navigatorButtons = {
rightButtons: [{
title: 'Reset',
id: 'resetButton'
}, {
title: 'Submit',
id: 'submitButton'
}]
};
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(
this));
}
render() {
return ( < View > < Text > Some text < /Text>
</View > );
}
onNavigatorEvent(event) {
if (event.type == 'NavBarButtonPress') {
if (event.id == 'resetButton') {
// reset here
}
if (event.id == 'submitButton') {
// submit here
}
}
}
}
export default createContainer(params => {
const handle = Meteor.subscribe('records');
return {
records: Meteor.collection('records').findOne(),
};
}, TestScreen);

You can set them dynamically on navigator:
this.props.navigator.setButtons({
rightButtons: [
{ title: 'Reset', id: 'resetButton' },
{ title: 'Submit', id: 'submitButton' }
]
});