I am using Codesandbox to work on learning React. I am trying to conditionally render a functional React component inside of a function (inside of a class based component), that fires when a button is clicked.
Here is the link to the Codesandbox: https://codesandbox.io/embed/laughing-butterfly-mtjrq?fontsize=14&hidenavigation=1&theme=dark
The issue I have is that, without importing and rendering the Error and Meals in App.js, I never can get either component to render from the Booking component. In the function here:
if (!this.state.name) {
return (
<div>
<Error />
</div>
);
}
else {
return <Meals name={this.state.name} date={this.state.date} />;
}
}
I should be rendering Error, which should then show on the screen on click if no name is inputted but nothing happens and I am stumped.
Is there anything obvious that would be preventing me from seeing the Error component from loading on the click?
Thank you in advance!
Everything that is displayed on the screen comes from render method. You cann't return JSX from any function like that. You can do something like this:
class Bookings extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
date: "",
display: false
};
}
guestInfoHandler = event => {
console.log(this.state, "what is the state");
this.setState({ name: event.target.value });
};
dateInfoHandler = event => {
this.setState({ date: event.target.value });
};
showMeals = () => {
this.setState({ display: true });
};
render() {
return (
<>
<div style={{ display: "inline-block" }}>
<form
className="theForm"
style={{
height: "50px",
width: "100px",
borderColor: "black",
borderWidth: "1px"
}}
>
<label className="theLabel">
Name:
<input
className="theInput"
type="text"
placeholder="guest name here"
onChange={this.guestInfoHandler}
value={this.state.value}
/>
</label>
</form>
<form>
<label>
Date:
<input
type="text"
placeholder="date here"
onChange={this.dateInfoHandler}
value={this.state.value}
/>
</label>
</form>
<button onClick={() => this.showMeals()}>Click</button>
</div>
{ display && name ? (
<Meals name={name} date={name} />
) : (
<Error />
)}
</>
);
}
}
export default Bookings;
Hope this works for you.
render() {
const name = this.state.name;
return (
<div>
{name ? (
<Meals name={name} date={name} />
) : (
<Error />
)}
</div>
);
}
nb:use render method in class component only.
there is various types conditional rendering mentioned in
https://reactjs.org/docs/conditional-rendering.html#
Related
I have the following form, and the part that works is it sets the state for each option to "true" of "false" as I check and uncheck the boxes as expected.
My problem is that when I first run the app, if I have some states set to true, I want those checkboxes to start off rendered as checked... however they don't. Even those the state is true, they all render unchecked. I believe I'm just not getting the value to the right spot to make it check. But I'm not sure what else to try. Any help would be appreciated.
Parent Component:
class Audit extends Component {
constructor(props) {
super(props);
this.state = {
formRewardsService: true,
formRewardsRetirement: true,
formRewardsPeerRecognition: false,
formRewardsSpot: false
};
this.handleCheck = this.handleCheck.bind(this);
}
handleCheck(e) {
this.setState(({ isChecked }) => (
{
isChecked: !isChecked
}
));
console.log(e.target.name + ': ' + e.target.checked);
}
render() {
return (
<ThemeProvider theme={theme}>
<Container>
<Div>
<Tabs defaultActiveKey="general" id="audit=tabs">
<Tab eventKey="culture" title="Culture">
<Culture handleCheck={this.handleCheck} { />
</Tab>
</Tabs>
</Div>
</Container>
</ThemeProvider>
);
}
}
export default Audit;
My Child Component with the form and checkboxes(The first two should render as checked since they are "true" to start off):
import React, { Component } from 'react';
import {Container, Form, Row, Col} from 'react-bootstrap';
import styled, { ThemeProvider } from 'styled-components';
import theme from "../../../../Config/Theme";
const Div = styled.div`
background-color: white;
color: black;
`
class Culture extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<Div>
<Container >
<Form className="p-3">
<Form.Group name="formRewards1" as={Row} controlId="formRewards1" onChange={this.props.handleCheck}>
<Form.Label column sm={5}>
1.What types of employee recognition programs are utilized within the organization? Check all that apply.
</Form.Label>
<Col>
<Form.Check
type="checkbox"
label="Service Awards"
value={this.props.formRewardsService}
name="formRewardsService"
id="formRewards1-1"
checked={this.props.value}
/>
<Form.Check
type="checkbox"
label="Retirement Awards"
value={this.props.formRewardsRetirement}
name="formRewardsRetirement"
id="formRewards1-2"
checked={this.props.value}
/>
<Form.Check
type="checkbox"
label="Peer Recognition Awards"
value={this.props.formRewardsPeer}
name="formRewardsPeer"
id="formRewards1-3"
checked={this.props.value}
/>
<Form.Check
type="checkbox"
label="Spot Awards"
value={this.props.formRewardsSpot}
name="formRewardsSpot"
id="formRewards1-4"
checked={this.props.value}
/>
</Col>
</Form.Group>
</div>
</Form>
</Container>
</Div>
</ThemeProvider>
);
}
}
export default Culture;
To pass all checkboxes value from state at once, you can grab them in a sub level of state like:
state = { checkboxes : {
formRewardsService: false,
formRewardsRetirement : true,
...
}}
and then pass only checkboxes states to Culture props
<Culture handleCheck={this.handleCheck} {...this.state.checkboxes } />
And rewrite your handleCheck function like this:
handleCheck = (e) => {
const name = e.target.name;
const checked = e.target.checked
this.setState(
{
...this.state,
checkboxes: {
...this.state.checkboxes,
[name]: checked
}
}
));
console.log(e.target.name + ': ' + e.target.checked);
}
You can remove the bind function if you write function like this:
handleCheck = (e) => { ...
Then write this function to set the state properly like this:
handleCheck = (e) => {
const name = e.target.name;
const checked = e.target.checked
this.setState(
{
[name]: checked
}
));
console.log(e.target.name + ': ' + e.target.checked);
}
Then you have to pass checked states to Culture props.
render() {
return (
<ThemeProvider theme={theme}>
<Container>
<Div>
<Tabs defaultActiveKey="general" id="audit=tabs">
<Tab eventKey="culture" title="Culture">
<Culture handleCheck={this.handleCheck} formRewardsService={this.state.formRewardsService} ... />
</Tab>
</Tabs>
</Div>
</Container>
</ThemeProvider>
);
}
and for checkboxes:
<Form.Check
type="checkbox"
label="Service Awards"
name="formRewardsService"
id="formRewards1-1"
checked={this.props.formRewardsService}
/>
I'm trying to see if multiple mapped children components can be passed a function to change some of their props. The deal is that, I have a children rows that are representing shift periods, like this:
Which is actually this child component code:
class ShiftRow extends React.Component {
rawMarkup() {
var md = createRemarkable();
var rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
}
handleAvailableVal = () => {
props.onChange(event.target.checked);
}
render() {
return (
<tr className="shift" style={{ backgroundColor: this.props.availability ? 'green' : 'red', color: this.props.availability ? 'white' : 'black' }}>
{React.Children.map(this.props.children, (child, i) => {
// Ignore the first child
return child
})}
</tr>
);
}
}
The idea is, I want to be able to pass down initial values as the shifts are created in the parent ShiftList component, which are mapped out in the component like this:
if (this.props.data && this.props.data.length > 0) {
shiftNodes = this.props.data.map(shift => (
<ShiftRow key={shift.id} newInd={this.props.isNew} availability={shift.Available} ref={this.ShiftElement}>
<td>{shift.Description}</td>
<td style={{textAlign: 'center'}}>
<input
type="checkbox"
checked={shift.Available}
onChange={this.handleAvailableVal}
style={{ width: '1.5em', height: '1.5em'}}
/>
</td>
<td style={{ textAlign: 'center' }}>
<input readOnly
type="checkbox"
checked={shift.AllDay}
style={{ width: '1.5em', height: '1.5em' }}
/>
</td>
{this.determineShiftPeriod(shift)}
<td>{(shift.DayOfWeek && shift.ShiftType != 'Daily') ? shift.DayOfWeek : 'N/A (Daily)'}</td>
</ShiftRow>
));
}
Is there a way I can change the prop in a row by row fashion like this so that I can say, pass this full set of shift represented rows to save to a database? Let me know if I can clarify anything.
Example: I want to be able to click the "Available" checkbox and watch the props value of that row update for THAT row only, and then save the row as such with other rows.
Yes, the setState() function (or an anonymous function that calls it) could be passed down to child components so that they can modify parent state and by so doing, modify their props indirectly. Something like this:
class ParentComponent extends React.Component {
...
updateState = args => this.setState(args);
render() {
return (<ChildComponent key={shift.id} newInd={this.props.isNew} ... updateState={() => this.updateState()}>
</ChildComponent>);
}
}
Maybe you can do this:
<input
type="checkbox"
checked={shift.Available}
onChange={(evt) => this.handleAvailableVal({evt, shift})} // this way you'll have access to both shift and evt
style={{ width: '1.5em', height: '1.5em'}}
/>
Good Luck...
Use something like this to modify the children item's props. Hope this helps
function ANotherComponent(props) {
console.log("props", props);
return <div>Another component</div>;
}
function T(props) {
const newChildren = React.Children.map(props.children, (child, i) => {
// Ignore the first child
return React.cloneElement(
child,
{
newProps1: 1,
newProps2: 2,
},
child.props.children
);
});
return <div>{newChildren}</div>;
}
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<T>
<ANotherComponent hello="1" />
<ANotherComponent hello="1" />
<ANotherComponent hello="1" />
<ANotherComponent hello="1" />
<ANotherComponent hello="1" />
</T>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
So basically your handling of children will become something like this:
{React.Children.map(this.props.children, (child, i) => {
// Ignore the first child
return React.cloneElement(child, {
newProps1: 1,
newProps2: 2
}, child.props.children)
})}
I have created a Material UI search bar front-end but for now I am unable to type anything into it. How could I fix this?
export default class userSearchPage extends Component <{}, { searchItem: string}>{
constructor(props: Readonly<{}>) {
super(props);
this.state = {
searchItem: 'ha'
};
}
render() {
return (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<div className='main-content'>
{/* <Typography>{this.state.searchItem}</Typography> */}
<SearchBar
onChange={e => {
this.setState({searchItem: e.target.value})
}}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
</div>
);
}
}
The onChange method doesn't work and gives an error.
I feel that this method in general is not the ideal way. How else could I make the search bar functional in Typescript so it could read and store what the user types in?
Try this one
<form onSubmit={props.onRequestChange}>
<input id="searchbartext" onChange={props.onChange} />
</form>
I have a form that has 10+ input fields that update the state of the class. To make things look cleaner I moved all input fields with labels into a separate component so I could re-use it for each input instead. This component takes 2 parameters and serves as a child in my main class.
child component:
const Input = ({ name, placeholder }) => {
return (
<div className="wrapper">
<Row className="at_centre">
<Col sm="2" style={{ marginTop: "0.5%" }}><Form.Label>{ name }</Form.Label></Col>
<Col sm="5"><Form.Control placeholder={ placeholder }/></Col>
</Row>
</div>
)
}
parent:
state = { name: '', description: '' }
handleSubmit = (e) => {
e.preventDefault()
console.log(this.state);
}
render(){
return(
<Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >
<Input name="Name: " placeholder="How is it called?" onChange={ (event) => this.setState({name: event.target.value}) }/>
<Input name="Description: " placeholder="Please describe how does it look like?" onChange={ (event) => this.setState({description: event.target.value}) }/>
<Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>
</Form>
)
}
After I did that I can't find the way how to update the state from my child components when the text is changed. All my attempts to do so either crashed the website or did nothing. I am still new to React.js so any feedback is appreciated.
Pass onChange event to your child component and wire it with Form.Control control.
Your Input component will be,
const Input = ({ name, placeholder, onChange }) => {
return (
<div className="wrapper">
<Row className="at_centre">
<Col sm="2" style={{ marginTop: "0.5%" }}>
<Form.Label>{name}</Form.Label>
</Col>
<Col sm="5">
<Form.Control onChange={onChange} placeholder={placeholder} />
</Col>
</Row>
</div>
);
};
And your Parent component is,
class Parent extends React.Component {
state = { name: "", description: "" };
handleSubmit = e => {
e.preventDefault();
console.log(this.state);
};
render() {
return (
<Form
style={{ marginBottom: "5%", padding: 10 }}
onSubmit={this.handleSubmit}
>
<Input
name="Name: "
placeholder="How is it called?"
onChange={event => this.setState({ name: event.target.value })}
/>
<Input
name="Description: "
placeholder="Please describe how does it look like?"
onChange={event => this.setState({ description: event.target.value })}
/>
<Button variant="outline-success" size="lg" type="submit">
SUBMIT
</Button>
</Form>
);
}
}
Working Codesandbox here.
In React, properties flow from the parent component to the child component, so you cannot directly "pass" the state from the child to the parent.
What you can do however is to have the parent pass a callback function to the child that will be called to update the parent's state.
Here is an example:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
}
updateName(name) {
if (name === this.state.name) return;
this.setState({ name });
}
render() {
return (
<div>
<p>The name is {this.state.name}</p>
<ChildComponent handleNameUpdate={name => this.updateName(name)} />
</div>
);
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
}
handleInputChange(e) {
this.setState({ name: e.target.value });
this.props.handleNameUpdate(e.target.value)
}
render() {
return <input type="text" value={this.state.name} onChange={e => this.handleInputChange(e)} />;
}
}
You have to build what is known as a controlled component.
const Input = ({ label, name, onChange, placeholder }) => (
<div className="wrapper">
<Row className="at_centre">
<Col sm="2" style={{ marginTop: "0.5%" }}>
<Form.Label>{ label }</Form.Label></Col>
<Col sm="5">
<Form.Control name={ name }
value={ value }
placeholder={ placeholder }
onChange={ onChange }
/>
</Col>
</Row>
</div>
)
And in your parent,
state = { name: '', description: '' }
handleChange = ({ target: { name, value } }) => this.setState({ [name]: value })
render() {
const { name, description } = this.state
<Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >
<Input label="Name: " name="name" value={name} onChange={handleChange}/>
<Input label="Description: " description="description" value={description} onChange={handleChange}/>
<Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>
</Form>
}
Advice
Try to avoid manufacturing lambda methods inside the render function as much as possible and have a class property as a lambda method so that lambdas do not need to be manufactured on every render cycle.
I'm struggling to fix some issues regarding React JS. Currently worked on a crash course, and I've been trying to improve the todoList. I'm very new and hopefully this might give me a new perspective after already 8 hours of troubleshooting.
My code - Input:
export class TodoItem extends Component {
getStyle = () => {
return {
background: '#233D4D',
padding: '15px',
borderBottom: '1px darkgray Ridge',
textDecoration: this.props.todo.completed ? 'line-through' :
'none',
color: this.props.todo.completed ? 'lightgreen' : 'white',
fontWeight: this.props.todo.completed ? 'bold' : 'none',
}
}
render() {
const { title } = this.props.todo;
return (
<div style={this.getStyle()}>
<p>
<input type="checkbox" onChange= .
{this.props.markComplete.bind(this)} checked= .
{this.props.todo.completed} /> {' '}
{title}
<button style={btnStyle} onClick= .
{this.props.delTodo.bind(this)}><FontAwesomeIcon size="2x" icon= .
{faTrash} /></button>
</p>
</div>
)
}
}
// PropTypes
TodoItem.propTypes = {
Todos: PropTypes.array.isRequired,
markComplete: PropTypes.func.isRequired,
delTodo: PropTypes.func.isRequired
}
My code - Failed propType:
render() {
const { title } = this.props.todo;
return (
<div style={this.getStyle()}>
<p>
<input type="checkbox"
onChange={this.props.markComplete.bind(this)}
checked={this.props.todo.completed} /> {' '}
{title}
<button style={btnStyle}
onClick={this.props.delTodo.bind(this)}>
<FontAwesomeIcon size="2x" icon={faTrash} />
</button>
</p>
</div>
)
}
// PropTypes
TodoItem.propTypes = {
Todos: PropTypes.array.isRequired,
markComplete: PropTypes.func.isRequired,
delTodo: PropTypes.func.isRequired
}
Heres my issues:
#1 - Prop Types
index.js:1446 Warning: Failed prop type: The prop `Todos` is marked as required in `TodoItem`, but its value is `undefined`.
in TodoItem (at Todos.js:12)
#2 - Component changing an uncontrolled input
Warning: A component is changing an uncontrolled input of type text to
be controlled. Input elements should not switch from uncontrolled to
controlled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component.`
======== EDIT =========
Heres where the components called, properties passed and the manipulation:
render() {
return (
<Router>
<div className="App">
<div className="container">
<Header />
<Route exact path="/" render={props => (
<React.Fragment>
<AddTodo addTodo={this.addTodo} />
<Todos todos={this.state.todo} markComplete= .
{this.markComplete}
delTodo={this.delTodo} />
</React.Fragment>
)} />
<Route path="/about" component={About} />
</div>
</div>
</Router>
);
class Todos extends Component {
render() {
// Mangler håndtering af ingen elementer
let output = undefined;
if(this.props.todos && this.props.todos.length > 0){
// lav object
let output = this.props.todos.map((todo) => (
<TodoItem key={todo.id} todo={todo} markComplete=
{this.props.markComplete} delTodo={this.props.delTodo} />
))
return output;
}
return (
<div>
{output}
</div>
/*this.props.todos.map((todo) => (
<TodoItem key={todo.id} todo={todo} markComplete=
{this.props.markComplete} delTodo={this.props.delTodo} />
))*/
);
}
}
I cleaned the mess in your code a bit and it is now working for me:
const TodoItem = ({title, completed, delTodo, markComplete}) => (
<div>
<p>
<input type="checkbox" onChange={markComplete} checked={completed} />
{title}
<button onClick={delTodo}>Delete</button>
</p>
</div>
);
TodoItem.propTypes = {
title: PropTypes.string.isRequired,
completed: PropTypes.bool.isRequired,
markComplete: PropTypes.func.isRequired,
delTodo: PropTypes.func.isRequired
};
class Todos extends Component {
constructor(props) {
super(props);
this.state = {
todos: [
{id: 1, title: "First", completed: false},
{id: 2, title: "Second", completed: false},
{id: 3, title: "Third", completed: true}
]
};
}
markComplete = id => {
const index = this.state.todos.findIndex(t => t.id === id);
if (index > -1) {
const modifiedTodos = JSON.parse(JSON.stringify(this.state.todos));
modifiedTodos[index].completed = true;
this.setState({todos: modifiedTodos});
}
};
delTodo = id => {
const index = this.state.todos.findIndex(t => t.id === id);
if (index > -1) {
const modifiedTodos = JSON.parse(JSON.stringify(this.state.todos));
modifiedTodos.splice(index, 1);
this.setState({todos: modifiedTodos});
}
};
render() {
return (
<div>
{this.state.todos
? this.state.todos.map(todo => (
<TodoItem
key={todo.id}
title={todo.title}
completed={todo.completed}
markComplete={() => this.markComplete(todo.id)}
delTodo={() => this.delTodo(todo.id)}
/>
))
: null}
</div>
);
}
}
Some comments about your code:
[FIRST ERROR]: Via propTypes you had Todos as property for TodoItem, but you didn't set that property when using TodoItem and because you set it as required with .isRequired, the first error had been thrown.
[SECOND ERROR]: As far as I can tell, changing from uncontrolled to controlled inputs happens, when the change handler changes from undefined to some function. You didn't paste your code with that function, so I can not tell, what was going wrong exactly, but I think the problem is the binding of the functions markComplete and delTodo you provided TodoItem via prop. Usually this binds the this object to the current execution context (class TodoItem in this case) and because TodoItem has no member functions markComplete and delTodo itself, the binding returns undefined for them.
Next time you post a question try to write a minimal working example (MWE). Your code is really bloated with irrelevant stuff. Remove that and the folks here at SO will have a much better time helping you.
In your classes Todos and TodoItem you don't have any state, so better use stateless function components (much more compact).
On some places you had white spaces and dots separating your property names and your property values.