I'm learning basics of react and currently im exploring certain problem statements available on the internet.
One such problem statement required me to create a react app for a text slide creator with previous , next and reset buttons. I was able to create till here -
My app.js file looks something like this-
import React from 'react';
import MyComponent from './MyComponent'
import slidesData from './slidesData'
import SlideComponent from './SlideComponent'
import './App.css';
function App(){
const slidestate=slidesData.map(slide=><SlideComponent key={slide.id} sli={slide}/>)
return(
<div id="main-div">
{slidestate}
<MyComponent />
</div>
)
}
export default App;
and my SlideComponent.js looks something like -
import React from 'react'
function SlideComponent(props){
return(
<div>
<h1>{props.sli.title}</h1>
<p>{props.sli.description}</p>
</div>
)
}
export default SlideComponent
and my 'MyComponent.js' looks something like this -
import React from 'react'
function MyComponent(){
return(
<div>
<button>Reset</button>
<button>Previous</button>
<button>Next</button>
</div>
)
}
export default MyComponent
and the JSON file in which i wish to render the text slides from looks something like -
const slidesData = [{id:1,title:"title1",description:"hello first slide"},{id:2,title:"title2",description:"hello second slide"}]
export default slidesData
I have basic knowledge about states and props and useEffect() components and also functional and class components.
I want to use the buttons to change the slide to previous , next or reset and respectively want that slide(from json file only) to be rendered at once (also not worried about timing of slides as of now). I know i have to use state change here , but i do not know how to proceed.Please help me. please excuse me for not styling it properly. i basically wanted to provide this functionality and then proceed with the css part. Please help me achieve this. It would help me a lot.
From what I understood, you need to have a state as current_slide that will hold your current slide id. whenever you press next or previous button you need to trigger a function in App() that is passed through your MyComponent and that will change your current_slide value and you need to pass that to your slide component so that can be shown. In case of reset button press event, just set the value of current_slide to the default value. Hope that helps. If I misunderstood, please correct me.
Related
Please i need help trying to get the value/state of each selected checkbox in my react native project.
What I'm trying to do actually is to click on a button that navigates to "SelectProducts" screen. then the screen shows a list of items to select using checkboxes. I put the checkbox I imported from expo in a loop like the following:
import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, Alert, Image, ScrollView, TouchableOpacity } from 'react-native';
import {useNavigation} from '#react-navigation/native';
import Checkbox from 'expo-checkbox';
const SelectProducts = ({route}) => {
const navigation = useNavigation();
const [checkedBox, setCheckedBox] = useState([]);
const [itemList, setItemList] = useState([]);
{itemList.map((item, index) => (
<View key={item.id} style={styles.checkboxContainer}>
<Checkbox
value={checkedBox[index]}
onValueChange={() => {
let checkedBox = [];
checkedBox[index] = !checkedBox[index];
setCheckedBox(checkedBox);
// console.log(setCheckedBox(checkedBox));
}}
color={checkedBox ? '#800080' : undefined}
style={styles.checkbox}
/>
</View>
))}
}
export default SelectProducts;
The code above is just a part of the entire code in the "SelectProducts" screen where I'm having issues. Please let me know what I'm not during right here.
So, after selecting the checkboxes for the items I want to include when recording a sales order, the system should get the price, item name, and picture to send back to the previous screen in order to calculate the total sum, etc. when done with the item selection.
But the result I'm getting is very weird. There is now a list of items with checkboxes as expected, but once I select one of the checkboxes, then try to select another one, the previous checkbox will be unselected automatically for the current one to be selected. The checkbox selection is behaving exactly like normal radio buttons that only accept one input at a time. Meaning that my checkbox implementation isn't allowing multiple selections. This is the main challenge I'm facing at the moment.
I have even tried to print out the output of the value when selected but it's showing 'undefined'. I'm so confused here. I know this is simple to some of the developers here but I'm quite finding it hard to implement. It has already taken me some days now. Please help. Thanks!
PS: I'm currently using this guy's solution How to handle checkbox in loop react native . He used a class component implementation while I used a function component. But it's not working for me. Don't know why. Please kindly help me look into it.
This might help
itemList.map((item, index) => (
.....
<Checkbox
...
onValueChange={() => {
const newCheckedBox = [...checkedBox];
newCheckedBox[index] = !newCheckedBox[index];
setCheckedBox(newCheckedBox);
}}
...
/>
....
))
I am building a React application and I wanted to use the material-ui framework.
I build a component with a textfield and a button but I can`t click the textfield neither the button their blocked.
Here is the component code:
import React, { Component } from 'react';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
class Descarcare extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return(
<div>
<h1>Descarcare</h1>
<TextField id="standard-required" label="ID" InputProps={{
readOnly: false,
}}/>
<Button variant="contained" color="primary">
Trimite
</Button>
</div>
);
}
}
export default Descarcare;
The component appears in the browser but I can`t press the button it is blocked and so is the input field. I can not write anything in it. Can please someone help me ? Thanks in advance
You have to provide the onClick and onChange functions respectively.
It might be related to your other configs, You could have a reference to this example:
In React you got to control inputs see here as for the material-ui library buttons default to disable if no onClick is provided (if I recall correctly)
and text fields need value and onChange to react!
hope it is helpfull
I would like to have avatar edit in the same route as home table, switched on 'avatarEditToogle'. I would use ternary operator in my home component
{{avatarEditToogle} : <AvatarEdit/> ? ... some logic to show default view}
If avatarEditToogle then show AvatarEdit, else show table in my home component.
The problem how to pass the information from Link to the props. I have found solution.
<Link to={{pathname:'/',
state: {
avatarEditToogle: true
}
}}
The problem is that whenever I click on the link the avatarEditToogle is true,
but in the home component before clicking link (avatar icon) is props.location.state.avatarEditToogle undefined. I would like to preset this props in some way to false, to not display AvatarEdit before clicking on the link.
What's the problem? After all, a false will undefined and you can use undefined value instead boolean
{!!avatarEditToogle ? <AvatarEdit/> : ... some logic to show default view}
if your route is not gonna change, I guess it's not a good idea to use Link after all. you can use useState and save toggle value (true or false) inside it and whenever you click on toggle button, just change it's state:
const [showEdit, setShowEdit] = useSate(false);
...
...
<button onClick={() => setShowEdit(true)}>Edit Avatar</button>
{showEdit && <AvatarEdit/>}
I'm new to React, I didnt know how to call the problem I'm facing
I have a list of friends, and when the list is empty a message is displayed indicating "Add friends to be displayed here"
and when I add a friend the message should dissapear
the thing is that I need to do it with a life cycle method, like componentDidUpdate() for example.
The functionality is there, but as in the title, 1 turn or movement as I call it later
I will explain:
I see the message to add friends, but when I click to add a friend it doesnt dissapear until I add a second friend.
And the message doesnt reapears when I delete all the friends, but when I add new friend, so its a turn latter, I do a thing and in the next movement the component is rerendered
I'm sure its something simple, but I have been struggling with it for two days and I cant find how to make it work instantly.
here is the code
import React, { Component } from 'react';
import Title from './title';
/* I'm using this var, because when I try to set it with a state I get an infinite loop */
var title = "Add friends to view them here";
class FriendList extends Component {
constructor(props){
super(props)
}
componentWillReceiveProps(nextProps){
/* friendList is an array with friends objects */
if(this.props.friendList.length > 0){
console.log("this is "+ title);
title = "";
}else{
title = "Add friends to view them here";
console.log("this is "+ title);
}
}
render(){
let friends = this.props.friendList;
return(
<div className="friend-list">
<p>{title}</p>
<div>
{Object.keys(friends).map((key) => {
var friend = friends[key];
return (
<div className="friendData">
<img className="friendPhoto"src={friend.profilePic} alt={friend.profilePic}/>
<div className="friend">
{friend.name}
<br/>
{friend.city}
</div>
<button className="delete" onClick={() => this.props.deleteFriend(friend)} >X</button>
</div>
);
}
)}
</div>
</div>)
}
}
export default FriendList;
You can conditionally render the title
<p>{this.props.friendList.length === 0 ? title : null}</p>
Instead of
<p>{title}</p>
Please include a screenshot of the Browser React Debugger extension with all the variables,state,props expanded.
It might be that your component is not re-rendering. I had this kind of issue before.
Also, can you try closing the developer tools (F12). I had an issue before where my app does 1 tick only if my Dev Tool is open.
Where my element is supposed to change color only when I hover-in, and back to original color when I hover-out, but when my dev tools is open, it's stuck to the changed color even if I already hover-out.
I'm trying to create a settings menu for a react native project I am working on, and for the majority of my UI I am using react native elements. One of the settings I need is a boolean value, so I want to use a switch in order to change that value. However I can not get the switch to even show up on the list item.
Here are my imports in my settings.js file:
import React from 'react';
import { Switch, Dimensions, StyleSheet, Text, View } from 'react-native';
import {ListItem, Input, Button } from 'react-native-elements';
When I try to create a a List Item with a switch, Like so:
<ListItem
switch
title="Active"
switched = {this.state.active}
/>
I get an error that says: "TypeError: IN this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant"
If I try to create a ListItem like this:
<ListItem
switchButton
title="Active"
switched = {this.state.active}
/>
The item shows up but there is no switch. What am I missing?
First i think there is no switch props in Lists.
Second if you need to display the switchButton you need to add the hideChevron prop as well.
Example:
<List>
<ListItem
switchButton
title=":( Where is my switch?"
onSwitch={e => console.warning(e)}
/>
<ListItem
switchButton
hideChevron
title=":) Here it is!"
onSwitch={() => {}}
/>
</List>