How to modify react useState from secondary File - javascript

I'm all new to react and am currently trying to modify an useState hook from another File. When one of the radio buttons from "Options.tsx" get's selected, the result should somehow be updated with the setResult function of useState hook so the Tag gets updated.
I think I almost got it, but I don't manage to pass the correct 'onSelect' Property to Options.tsx so it is updated.
Here's my code so far:
App.tsx
import React from 'react';
import './App.css';
import { useState } from 'react';
import { Result, ResultType } from './Result'
import { Options } from './Options'
function App() {
const [result, setResult] = useState<ResultType>('pending')
return (
<div className="App">
<header className="App-header">
<Options onSelect={props.onSelect} />
<Result result={result} />
</header>
</div>
);
}
export default App;
Options.tsx
import React from 'react'
interface Props {
onSelect: (correct: boolean) => void
}
export const Options = ({onSelect}: Props) => {
// TODO
const setWrong = () => setResult('wrong');
const setCorrect = () => setResult('correct');
return(
<div>
<fieldset>
<input type='radio' id='option1' onSelect={setWrong}/>
<label htmlFor='option1'>Label 1</label>
<input type='radio' id='option2' onSelect={setCorrect}/>
<label htmlFor='option2'>Label 2</label>
<input type='radio' id='option3' onSelect={setCorrect}/>
<label htmlFor='option3'>Label 3</label>
</fieldset>
</div>
)
}
Result.tsx (just for completion - works fine so far)
import React from 'react'
export type ResultType = 'pending' | 'correct' | 'wrong'
interface Props {
result: ResultType
}
export const Result = ({ result }: Props) => {
switch (result) {
case 'pending':
return <h2>Make a guess</h2>
case 'correct':
return <h2>Yay, good guess!</h2>
case 'wrong':
return <h2>Nope, wrong choice...</h2>
}
}
Any idea, how I can update the useState from Options.tsx?
Thank you in advance!

It's quite simple - you just need to propagate the setter via properties, to Options.
<Options setResult={setResult} />
Or, provide your own method which uses setResult, depending on circumstances.
I would note though that the value you're currently passing down to the onSelect, appears to be bound to an incorrect value. Typescript compiler is probably complaining about it?

You can pass the updater function to Options component:
<Options setResult={setResult} />
then in your Options Component you can use
props.setResult('blah')

Just pass setResult prop to Options component.
App.tsx:
function App() {
const [result, setResult] = useState<ResultType>('pending')
return (
<div className="App">
<header className="App-header">
<Options onSelect={props.onSelect} setResult={setResult} />
<Result result={result} />
</header>
</div>
);
}
Options.tsx:
export const Options = ({onSelect, setResult}: Props) => {
const setWrong = () => setResult('wrong');
const setCorrect = () => setResult('correct');
...
}

Related

Conditional rendering in React based on current component state

I am struggling with figuring out how to implement conditional rendering in React. Basically, what I want to do is this: if there is a reviewResponse in the reviewResponses array, I no longer want to render the reviewResponseForm. I only want to render that ReviewResponse. In other words, each review can only have one response in this app.
I am not sure what I am doing wrong when trying to implement this logic. I know I need to implement some kind of conditional statement saying if the length of my reviewResponses array is greater than 0, I need to render the form. Otherwise, I need to render that reviwResponse. Every statement I have written has not worked here. Does anybody have a suggestion?
Here is my code so far:
My review cardDetails component renders my ReviewResponseBox component and passed the specific reviewId as props:
import React from "react";
import { useLocation } from "react-router-dom";
import StarRatings from "react-star-ratings";
import ReviewResponseBox from "../ReviewResponse/ReviewResponseBox";
const ReviewCardDetails = () => {
const location = useLocation();
const { review } = location?.state; // ? - optional chaining
console.log("history location details: ", location);
return (
<div key={review.id} className="card-deck">
<div className="card">
<div>
<h4 className="card-title">{review.place}</h4>
<StarRatings
rating={review.rating}
starRatedColor="gold"
starDimension="20px"
/>
<div className="card-body">{review.content}</div>
<div className="card-footer">
{review.author} - {review.published_at}
</div>
</div>
</div>
<br></br>
{/*add in conditional logic to render form if there is not a response and response if there is one*/}
<ReviewResponseBox review_id={review.id}/>
</div>
);
};
export default ReviewCardDetails;
Then eventually I want this component, ReviewResponseBox, to determine whether to render the responseform or the reviewresponse itself, if it exists already.
import React from 'react';
import ReviewResponse from './ReviewResponse';
import ReviewResponseForm from './ReviewResponseForm';
class ReviewResponseBox extends React.Component {
constructor() {
super()
this.state = {
reviewResponses: []
};
}
render () {
const reviewResponses = this.getResponses();
const reviewResponseNodes = <div className="reviewResponse-list">{reviewResponses}</div>;
return(
<div className="reviewResponse-box">
<ReviewResponseForm addResponse={this.addResponse.bind(this)}/>
<h3>Response</h3>
{reviewResponseNodes}
</div>
);
}
addResponse(review_id, author, body) {
const reviewResponse = {
review_id,
author,
body
};
this.setState({ reviewResponses: this.state.reviewResponses.concat([reviewResponse]) }); // *new array references help React stay fast, so concat works better than push here.
}
getResponses() {
return this.state.reviewResponses.map((reviewResponse) => {
return (
<ReviewResponse
author={reviewResponse.author}
body={reviewResponse.body}
review_id={this.state.review_id} />
);
});
}
}
export default ReviewResponseBox;
Here are the ReviewResponseForm and ReviewResponse components:
import React from "react";
class ReviewResponseForm extends React.Component {
render() {
return (
<form className="response-form" onSubmit={this.handleSubmit.bind(this)}>
<div className="response-form-fields">
<input placeholder="Name" required ref={(input) => this.author = input}></input><br />
<textarea placeholder="Response" rows="4" required ref={(textarea) => this.body = textarea}></textarea>
</div>
<div className="response-form-actions">
<button type="submit">Post Response</button>
</div>
</form>
);
}
handleSubmit(event) {
event.preventDefault(); // prevents page from reloading on submit
let review_id = this.review_id
let author = this.author;
let body = this.body;
this.props.addResponse(review_id, author.value, body.value);
}
}
export default ReviewResponseForm;
import React from 'react';
class ReviewResponse extends React.Component {
render () {
return(
<div className="response">
<p className="response-header">{this.props.author}</p>
<p className="response-body">- {this.props.body}</p>
<div className="response-footer">
</div>
</div>
);
}
}
export default ReviewResponse;
Any advice would be helpful, thank you.
If I understand your question correctly, you want to render ReviewResponseForm if the this.state.reviewResponses state array is empty.
Use the truthy (non-zero)/falsey (zero) array length property to conditionally render either UI element.
render () {
const reviewResponses = this.getResponses();
const reviewResponseNodes = <div className="reviewResponse-list">{reviewResponses}</div>;
return(
<div className="reviewResponse-box">
{reviewResponses.length
? (
<>
<h3>Response</h3>
{reviewResponseNodes}
</>
)
: (
<ReviewResponseForm addResponse={this.addResponse.bind(this)}/>
)}
</div>
);
}

getting problem on using useContext in react?

I have a simple react app in which i have to use useContext.
(btw im using vite + react)
here is my code for Context.jsx
import React, {useContext} from 'react';
const emailContext = React.createContext();
export const useEmail = () => useContext(emailContext);
export const emailProvider = ({children}) => {
const currentUser = "None";
const value = {
currentUser
}
return(
<emailContext.Provider value={value}>
{children}
</emailContext.Provider>
)
}
and heres how i am using the context
import "./styles.css";
import { useEmail } from "./Context/Context"
export default function App() {
const {currentUser} = useEmail();
return (
<div className="App">
<h1>Hello CodeSandbox {currentUser}</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
I am sure why I am getting error in this code.
some of the errors that I am getting
_useEmail is undefined (latest)
currentUser user is undefined
thing i have tried
Initialized createContext with some initial value (only intial value is visible).
using useContext() directy in the App.js (useContext(emailContext) return undefined)
instead of {children} used <children/>.
used useState instead of const currentUser in emailProvider
I am getting same problem even when I use typescript.
but none of the above helped.
You should wrapping app with <emailProvider></emailProvider> to using data in value={value}. Now it gets undefined from const emailContext = React.createContext();
Below code may help you analyse the flow , also check link for more details https://medium.com/technofunnel/usecontext-in-react-hooks-aa9a60b8a461
use useContext in receiving end
import React, { useState } from "react";
var userDetailContext = React.createContext(null);
export default function UserDetailsComponent() {
var [userDetails] = useState({
name: "Mayank",
age: 30
});
return (
<userDetailContext.Provider value={userDetails}>
<h1>This is the Parent Component</h1>
<hr />
<ChildComponent userDetails={userDetails} />
</userDetailContext.Provider>
);
}
function ChildComponent(props) {
return (
<div>
<h2>This is Child Component</h2>
<hr />
<SubChildComponent />
</div>
);
}
function SubChildComponent(props) {
var contextData = React.useContext(userDetailContext);
return (
<div>
<h3>This is Sub Child Component</h3>
<h4>User Name: {contextData.name}</h4>
<h4>User Age: {contextData.age}</h4>
</div>
);
}

Props turns out to be undefined in Reactjs

Hi I was trying to setState for my app based on the values of Props I was relying on values of prop for my state , But when I passed the function to setState the props I received were undefined , don't know why , I followed this document for reference. You can read the section that says State Updates May Be Asynchronous
Below is my code (code snippet from File Form.js)
this.props.setTodos(function (_, props) {
console.log("this is props:" + props);
return [
...props.todos,
{ text: props.inputText, completed: false, id: Math.random() * 1000 },
];
});
Code for App.js File where I pass props
import "./App.css";
import Form from "./components/Form";
import TodoList from "./components/TodoList";
import React, { useState } from "react";
function App() {
const [inputText, setText] = useState("");
const [todos, setTodos] = useState([]);
return (
<div className="App">
<header>
<h1>My Todolist </h1>
</header>
<Form
todos={todos}
setTodos={setTodos}
setText={setText}
inputText={inputText}
/>
<TodoList />
</div>
);
}
export default App;
Full code for Form.js file
import React from "react";
class Form extends React.Component {
constructor(props) {
super(props);
}
handler = (e) => {
// console.log(e.target.value);
this.props.setText(e.target.value);
};
submitTodoHandler = (e) => {
e.preventDefault();
this.props.setTodos(function (_, props) {
console.log("this is props:" + props);
return [
...props.todos,
{ text: props.inputText, completed: false, id: Math.random() * 1000 },
];
});
};
render() {
return (
<div>
<form>
<input onChange={this.handler} type="text" className="todo-input" />
<button
onClick={this.submitTodoHandler}
className="todo-button"
type="submit"
>
<i className="fas fa-plus-square"></i>
</button>
<div className="select">
<select name="todos" className="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
</div>
);
}
}
export default Form;
I don't know why my props are undefined ? Thanks
What you need to do is to change submitTodoHandler function in your <Form> component:
submitTodoHandler = (e) => {
e.preventDefault();
console.log(this.props.inputText) // outputs what you typed in the input
this.props.setTodos(this.props.inputText);
};
You define setState in functional component and pass it as a prop to class component. setState hook in functional components behaves slightly different from setState in class components, which you are referencing to.
In functional components setState (or setTodos in your case) changes the state of the variable simply by using setState(newVariableValue) and accepts as a parameter previous state. As newVariableValue is passed with a prop (inputText) from <App> component to <Form> component, you can directly access it with this.props.inputText.
Using the State Hook

Unable to pass function in props to a Component | React

I am trying to pass the function onSearchChangeEvent() from my App.js to Searchbox component as a function but I am getting the error saying
Expected onChange listener to be a function, instead got a value of
object type.
I looked up to different answers on Stackoverflow for the same error but I am unable to resolve this issue.
App.js : Contains the function onSearchChangeEvent() I am trying to pass to a < Searchbox /> component.
import React, {Component} from 'react';
import Cardlist from './Cardlist';
import Searchbox from './Searchbox';
import {robots} from './robots';
class App extends Component {
constructor () {
super()
this.state = {
robots : robots,
searchfield : ''
}
}
onSearchChangeEvent = () => {
console.log("Something Happened");
}
render () {
return (
<div className='tc'>
<h1>Robo Friends</h1>
<Searchbox searchChange={() => this.onSearchChangeEvent}/>
<Cardlist robots={this.state.robots} />
</div>
);
}
}
export default App;
Searchbox.js
import React from 'react';
const Searchbox = (searchField, searchChange) => {
return (
<div className='pa2'>
<input
className='pa3 ba b--green bg-lightest-blue'
type='search'
placeholder='Search Robots'
onChange={searchChange}
/>
</div>
);
}
export default Searchbox;
Error : First I get the warning, when the event is triggered I get the error
You aren't accessing the props correctly in SearchBox component. You would need to destructure them instead of defining them as arguments
const Searchbox = ({ searchField, searchChange }) => {
return (
<div className='pa2'>
<input
className='pa3 ba b--green bg-lightest-blue'
type='search'
placeholder='Search Robots'
onChange={searchChange}
/>
</div>
);
}
and pass it down like
<Searchbox searchChange={this.onSearchChangeEvent}/>
or
<Searchbox searchChange={() => this.onSearchChangeEvent()}/>
Though you must prefer <Searchbox searchChange={this.onSearchChangeEvent}/> since you are already using arrow function while defining onSearchChangeEvent function

React-Loadable re-rendering causing input to lose focus

I'm having an issue where react-loadable is causing one of my input components to re-render and lose focus after a state update. I've done some digging and I can't find anyone else having this issue, so I think that I'm missing something here.
I am attempting to use react-loadable to dynamically include components into my app based on a theme that the user has selected. This is working fine.
./components/App
import React from 'react';
import Loadable from 'react-loadable';
/**
* Import Containers
*/
import AdminBar from '../../containers/AdminBar';
import AdminPanel from '../../components/AdminPanel';
import 'bootstrap/dist/css/bootstrap.css';
import './styles.css';
const App = ({ isAdmin, inEditMode, theme }) => {
const MainContent = Loadable({
loader: () => import('../../themes/' + theme.name + '/components/MainContent'),
loading: () => (<div>Loading...</div>)
});
const Header = Loadable({
loader: () => import('../../themes/' + theme.name + '/components/Header'),
loading: () => (<div>Loading...</div>)
});
return (
<div>
{
(isAdmin) ? <AdminBar
className='admin-bar'
inEditMode={inEditMode} /> : ''
}
<Header
themeSettings={theme.settings.Header} />
<div className='container-fluid'>
<div className='row'>
{
(isAdmin && inEditMode) ? <AdminPanel
className='admin-panel'
theme={theme} /> : ''
}
<MainContent
inEditMode={inEditMode} />
</div>
</div>
</div>
);
};
export default App;
./components/AdminPanel
import React from 'react';
import Loadable from 'react-loadable';
import './styles.css';
const AdminPanel = ({ theme }) => {
const ThemedSideBar = Loadable({
loader: () => import('../../themes/' + theme.name + '/components/SideBar'),
loading: () => null
});
return (
<div className='col-sm-3 col-md-2 sidebar'>
<ThemedSideBar
settings={theme.settings} />
</div>
);
};
export default AdminPanel;
This is what my <ThemedSideBar /> components looks like:
./themes/Default/components/SideBar
import React from 'react';
import ThemeSettingPanel from '../../../../components/ThemeSettingPanel';
import ThemeSetting from '../../../../containers/ThemeSetting';
import './styles.css';
const SideBar = ({ settings }) => {
return (
<ThemeSettingPanel
name='Header'>
<ThemeSetting
name='Background Color'
setting={settings.Header}
type='text'
parent='Header' />
<ThemeSetting
name='Height'
setting={settings.Header}
type='text'
parent='Header' />
</ThemeSettingPanel>
);
};
export default SideBar;
./components/ThemeSettingPanel
import React from 'react';
import { PanelGroup, Panel } from 'react-bootstrap';
const ThemeSettingPanel = ({ name, children }) => {
return (
<PanelGroup accordion id='sidebar-accordion-panelGroup'>
<Panel>
<Panel.Heading>
<Panel.Title toggle>{name}</Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>
{children}
</Panel.Body>
</Panel>
</PanelGroup>
);
};
export default ThemeSettingPanel;
./containers/ThemeSetting
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { themeSettingChange } from '../App/actions';
import ThemeSetting from '../../components/ThemeSetting';
class ThemeSettingContainer extends Component {
constructor(props) {
super(props);
this.handleOnChange = this.handleOnChange.bind(this);
}
handleOnChange(name, parent, value) {
const payload = {
name: name,
parent,
value: value
};
this.props.themeSettingChange(payload);
}
render() {
return (
<ThemeSetting
name={this.props.name}
setting={this.props.setting}
parent={this.props.parent}
type={this.props.type}
handleOnChange={this.handleOnChange} />
);
}
}
//----Redux Mappings----//
const mapStateToProps = (state) => ({
});
const mapDispatchToProps = {
themeSettingChange: (value) => themeSettingChange(value)
};
export default connect(mapStateToProps, mapDispatchToProps)(ThemeSettingContainer);
./component/ThemeSetting
import React from 'react';
import TextField from '../common/TextField';
import './styles.css';
const ThemeSetting = ({ name, setting, type, parent, handleOnChange }) => {
return (
<div className='row theme-setting'>
<div className='col-xs-7'>
{name}
</div>
<div className='col-xs-5'>
{
generateField(type, setting, name, parent, handleOnChange)
}
</div>
</div>
);
};
function generateField(type, setting, name, parent, handleOnChange) {
const value = setting ? setting[name] : '';
switch (type) {
case 'text':
return <TextField
value={value}
name={name}
parent={parent}
handleOnChange={handleOnChange} />;
default:
break;
}
}
export default ThemeSetting;
./components/common/TextField
import React from 'react';
import { FormControl } from 'react-bootstrap';
const TextField = ({ value, name, parent, handleOnChange }) => {
return (
<FormControl
type='text'
value={value}
onChange={(e) => {
handleOnChange(name, parent, e.target.value);
}} />
);
};
export default TextField;
When a field inside of my Admin Panel is updated, a state change is triggered. It seems like this triggers react-loadable to re-render my <ThemedSideBar /> components which destroys my input and creates a new one with the updated value. Has anyone else had this issue? Is there a way to stop react-loadable from re-rendering?
EDIT: Here is the requested link to the repo.
EDIT: As per conversation in the comments, my apologies, I misread the question. Answer here is updated (original answer below updated answer)
Updated answer
From looking at the react-loadable docs, it appears that the Loadable HOC is intended to be called outside of a render method. In your case, you are loading ThemedSideBar in the render method of AdminPanel. I suspect that the change in your TextEdit's input, passed to update your Redux state, and then passed back through the chain of components was causing React to consider re-rendering AdminPanel. Because your call to Loadable was inside the render method (i.e. AdminPanel is a presentational component), react-loadable was presenting a brand new loaded component every time React hit that code path. Thus, React thinks it needs to destroy the prior component to appropriately bring the components up to date with the new props.
This works:
import React from 'react';
import Loadable from 'react-loadable';
import './styles.css';
const ThemedSideBar = Loadable({
loader: () => import('../../themes/Default/components/SideBar'),
loading: () => null
});
const AdminPanel = ({ theme }) => {
return (
<div className='col-sm-3 col-md-2 sidebar'>
<ThemedSideBar
settings={theme.settings} />
</div>
);
};
export default AdminPanel;
Original answer
It seems that your problem is likely related to the way you've built TextField and not react-loadable.
The FormControl is taking value={value} and the onChange handler as props. This means you've indicated it is a controlled (as opposed to uncontrolled) component.
If you want the field to take on an updated value when the user types input, you need to propagate the change caught by your onChange handler and make sure it gets fed back to the value in the value={value} prop.
Right now, it looks like value will always be equal to theme.settings.Height or the like (which is presumably null/empty).
An alternative would be to make that FormControl an uncontrolled component, but I'm guessing you don't want to do that.

Categories