menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team
Show previous messages

November 3, 2020 at 5:54pm
like-fill
1
Can someone tell me if this is a valid react native syntax.. I want to return a stack screen for every item in a state variable

November 10, 2020 at 7:19am
how do you rerender a page, when passing a new component
new parameter to a component

November 25, 2020 at 11:38pm
In the "page" component call forceUpdate()
Edited

December 14, 2020 at 4:07pm
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
Check the render method of App.
Please help getting this error on my react-native app
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapView, Permissions, Location } from 'expo';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
region: null,
}
this._getLocationAsync();
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if(status !== 'granted')
console.log('Permission to access location was denied');
let location = await Location.getCurrentPositionAsync({
enabledHighAccuracy: true
})
let region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.045,
longitudeDelta: 0.045,
}
this.setState({region: region})
}
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
<MapView
initialRegion={this.state.region}
showsUserLocation={true}
showsCompass={true}
rotateEnabled={false}
style={{flex:1}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
🥺🥺🥺😔😔
HELP

December 18, 2020 at 8:35pm
I want to use prepack instead of webpack when react bundle. How can I do this?

December 28, 2020 at 7:25pm
Hi guys, I want to use Sanity with react. I signed in npm i -g /cli ... got version 2.1.0 BUT SANITY INIT sais -bash: sanity: command not found... why?

December 29, 2020 at 5:26pm
Help pleaseeee!! Newbie here with react & typescript & styled components
I have the a component -say AboutUs- that I want to reuse and style differently, for example giving it a background color of yellow if primary props are true or red if primary props is false.
When I console.log in ABOUT US shows that the first infoSection has primary props, and the second does not.
I have been trying to style those two infoSections differently the component does not seem to take "primary" into consideration despite being passed as props & showing on the console, so I don’t know what I am doing wrong & don’t seem to be able to find the solution googling it…?
Any help/hint would be much appreciated!
ABOUT US
const Container = styled.div<InfoSectionProps>`
display: flex;
flex-direction: column;
letter-spacing: 2px;
line-height: 1.8em;
align-items: center;
padding:2rem;
${props => props.primary && css`
background: yellow /*doesnt work*/
`
background: ${props => props.primary ? "red" : "yellow"} /*gives both infoSection yellow background, so not recognising primary props*/
}
`
export default (props: InfoSectionProps) => {
console.log(props)
const { header, subheader, content, logo, footerLogo, cta, ctaText } = props
return (
<Container>
{
logo && <LogoImage src={logo} alt="logo" />
}
<Content >
<Header> {header}</Header>
<SubHeader>{subheader}</SubHeader>
{content!.map((paragraph: string, index: number) =>
<p key={index}>{paragraph}</p>
)}
{cta && <BookNowButton>{ctaText}</BookNowButton>}
</Content>
{
footerLogo && <BGroundImage src={footerLogo} alt="cat" />
}
</Container >
);
}
APP.JS
<InfoSection
primary
logo={Logo}
header={homeSection.header}
subheader={homeSection.subheader}
content={homeSection.content}
cta={homeSection.cta}
ctaText={homeSection.ctaText}
/>
<InfoSection
logo={Logo}
header={aboutUsSection.header}
subheader={aboutUsSection.subheader}
content={aboutUsSection.content}
footerLogo={Boss}
/>
export interface InfoSectionProps {
primary?: boolean,
logo?: any;
header?: string;
subheader?: string;
content?: string[];
footerLogo?: any;
cta?: boolean,
ctaText?: string
}
Edited

December 30, 2020 at 9:15am

January 6, 2021 at 4:04pm
Good day
Pls I need help on react
Am using external js, which was link to the app from the index.html file of the public folder.
I noticed that when the page get tender for the first time the actions click works but when navigating to other pages,
the action won't work until the page is refreshed
Pls help me out on this

January 7, 2021 at 7:35am
Hey, anyone who can help me by providing drag and drop form fields or related example code in functional components.
example:

January 15, 2021 at 10:00pm
Hello dear, have a good time
How to make instagram clone and amazon clone and youtube clone and ... www.courses.bangimo.com
Show more messages