How to simplify overriding props in React? - javascript

I have an If statement and returning the same component with the extra props based on the state. Any idea how to simplify this? Can I use recursion? Any idea?
iconRight is only difference.
renderInput = () => {
if (isLoading) {
return (
<Input
iconRight={(
<Spinner />
)}
autoComplete="off"
id="unique-id-2"
aria-autocomplete="both"
/>
);
}
return (
<Input
autoComplete="off"
id="unique-id-2"
aria-autocomplete="both"
/>
);
}
}

You can spread props onto the component:
renderInput = () => {
const props = {
autoComplete: 'off',
id: 'unique-id-2',
'aria-autocomplete': 'off'
};
if (isLoading) {
return (
<Input
iconRight={(
<Spinner />
)}
{...props}
/>
);
}
return (
<Input {...props} />
);
}
}
But i'd suggest changing your Input component to accept a loading prop and let the Input component handle that logic. It'll make your consuming code a lot easier to read also.

I think your function can be shortened to the following;
renderInput = () => (
<Input
iconRight={isLoading ? (<Spinner />) : null}
autoComplete="off"
id="unique-id-2"
aria-autocomplete="both"
/>
)
If you don't already, inside your Input component, you should check if the iconRight prop is not null, and only render it then.

You can try this:
renderInput = () =>(
<Input
iconRight={
isLoading && (
<Spinner />
)}
autoComplete="off"
id="unique-id-2"
aria-autocomplete="both"
/>
)

Related

React Conditional Rendering of Component Inside Function Not Working

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#

How to do conditional check twice in React component

I have a React component as shown. I am passing prop hasItems and based on this boolean value, i am showing PaymentMessage Component or showing AddItemsMessage component.
export const PayComponent = ({
hasItems
}: props) => {
return (
<Wrapper>
{hasItems ? (
<PaymentMessage />
) : (
<AddItemsMessage />
)}
<Alerts
errors={errors}
/>
</Wrapper>
);
};
This works well. Now, i need to pass another prop (paymentError). So based on this, i modify the JSX as below. I will highlight the parts i am adding by using comment section so it becomes easy to see.
export const PayComponent = ({
hasItems,
paymentError //-----> added this
}: props) => {
return (
<Wrapper>
{!paymentError ? ( //----> added this. This line of code errors out
{hasItems ? (
<PaymentMessage />
) : (
<AddItemsMessage />
)}
):( //-----> added this
<Alerts
errors={errors}
/>
) //-----> added this
</Wrapper>
);
};
Basically, i am taking one more input prop and modifying the way my JSX should look. But in this case, i am not able to add one boolean comparison one after the error. How do i make it working in this case. Any suggestions please ???
I recommend you to create a function to handle this behavior. It's easier to read and to mantain
export const PayComponent = ({
hasItems,
paymentError
}: props) => {
const RenderMessage = () => {
if (hasItems) {
if (paymentError) {
return <PaymentMessage />
}
return <AddItemsMessage />
}
return <Alerts errors={errors}/>
};
return (
<Wrapper>
<RenderMessage />
</Wrapper>
);
};

Conditional Attributes in React js

How do i accept conditional attributes in react.js
below is my search component, I want the InputGroup to have a onSubmit attribute if the onSubmit function is passed and an onChange attribute if an onChange function is passed
class QueryBar extends PureComponent {
render() {
const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
return (
<form
style={{ width }}
onSubmit={e => {
e.preventDefault();
onSubmit(e.target[0].value);
}}
>
<InputGroup
placeholder={placeholder}
width={width}
leftIcon="search"
rightElement={
<Button
type="submit"
icon={leftIcon}
minimal={true}
intent={Intent.PRIMARY}
/>
}
/>
</form>
);
}
}
QueryBar.propTypes = {
width: PropTypes.number,
placeholder: PropTypes.string,
leftIcon: PropTypes.oneOfType(['string', 'element']),
onSubmit: PropTypes.func
};
QueryBar.defaultProps = {
placeholder: 'Search...',
leftIcon: 'arrow-right',
width: 360
};
export default QueryBar;
jsx elements can also accept objects. Initialize an object that contains information for both situations and then add a conditional to add a function if it exists in the props passed in.
render() {
const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
const inputGroupProps = {
placeholder,
width,
leftIcon: 'search',
rightElement: (
<Button
type="submit"
icon={leftIcon}
minimal={true}
intent={Intent.PRIMARY}
/>
)
}
if (onChange) {
inputGroupProps.onChange = onChange
}
if (onSubmit) {
inputGroupProps.onSubmit = onSubmit
}
return (
<form
style={{ width }}
onSubmit={e => {
e.preventDefault();
onSubmit(e.target[0].value);
}}
>
<InputGroup {...inputGroupProps} />
</form>
);
}
While I do not recommend it, adding both are technically OK because a prop that isn't passed in from the parent but destructured, will be undefined. I don't recommend this because it is not expressive and will probably confuse you in the future
<InputGroup
placeholder={placeholder}
width={width}
leftIcon="search"
rightElement={
<Button
type="submit"
icon={leftIcon}
minimal={true}
intent={Intent.PRIMARY}
/>
}
onChange={onChange} // will be undefined and have no behavior if parent does not pass an onChange prop
onSubmit={onSubmit} // same for this one
/>
You can pass null if its not there i.e :
<InputGroup
placeholder={placeholder}
width={width}
leftIcon="search"
onChange={onChangeFn?onChangeFn:null}
onSubmit={onSubmitFn ? onSubmitFn : null}
rightElement={
<Button
type="submit"
icon={leftIcon}
minimal={true}
intent={Intent.PRIMARY}
/>
}
/>
It will make sure if function is there then call function otherwise it will not anything.
I would do this:
The idea is to have an Object optionalProps, an empty object for any possible conditional properties, when a property exists, we add it to the object, then, in the InputGroup component we apply it as {...optionalProps} which will extract any added properties to the object, and return nothing if null.
we could follow another approach: onChange={onChange && onChange}
But, note This will return false as a value for cases where onChange doesn't exist.
render() {
const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
let optionalProps = {};
if(onChange){
optionalProps['onChange'] = onChange;
}
if(onSubmit){
optionalProps['onSubmit'] = onSubmit;
}
return (
<form
style={{ width }}
onSubmit={e => {
e.preventDefault();
onSubmit(e.target[0].value);
}}
>
<InputGroup
placeholder={placeholder}
width={width}
leftIcon="search"
{...optionalProps}
rightElement={
<Button
type="submit"
icon={leftIcon}
minimal={true}
intent={Intent.PRIMARY}
/>
}
/>
</form>
);
}

How to pass null as a field's initial value in react-final-form?

A custom React component I use inside a react-final-form <Field> has a value prop of int?. Its value can either be an integer or null. But when I set a null initial value for this field component's value using the initialValues prop of the <Form> component, react-final-form converts the null to an empty string ''.
I know I can easily work around this by creating a wrapper component that checks for '' and converts it to null, but is there some other cleaner way to fix this? Or is this a library bug?
https://codesandbox.io/s/yq00zxn271
import React from "react";
import { render } from "react-dom";
import { Form, Field } from "react-final-form";
const IntField = (props) => (
<span>
<input type="text" value={props.value === null ? 0 : props.value} />
<pre>
<b>props.{props.name} === null</b> : {(initialValues[props.name] === null).toString()}
<br />
<b>props.value === null</b> : {((isNull) => (<span style={{ color: isNull ? 'green' : 'red' }}>{isNull.toString()}</span>))(props.value === null)}
<br />
<b>props: </b>{JSON.stringify(props)}
<br />
<b>initialValues: </b>{JSON.stringify(initialValues)}
</pre>
</span>
)
const onSubmit = values => {
console.log('submitted')
}
const initialValues = { someInteger: null };
const App = () => (
<Form
initialValues={initialValues}
onSubmit={onSubmit}
render={() => (
<form>
<label>Some Integer:</label>
<Field name="someInteger">
{({ input, meta }) => (
<IntField {...input} />
)}
</Field>
</form>
)}
/>
);
render(<App />, document.getElementById("root"));
You can use the <Field> prop allowNull? to turn off this behavior so that null values will be passed as-is to the child component.
Like this:
<Field name="someInteger1" allowNull={true}>
{({ input, meta }) => (
<IntField {...input} />
)}
</Field>
https://codesandbox.io/s/n4rl2j5n04
(answering my own question as a help for others, since it took me a while to figure out what was going on and how to fix it)
If you are like me and was looking for a way to prevent final-form from undefine-ing empty strings, you can use parse with identity function:
<Field
name="myField"
parse={x => x}
component={TextField}
/>

DRY jsx render method

I wonder if it is a better way to DRY this code, have you guys any ideas?
The props are the same, just the component change...
render() {
const { input: { value, onChange }, callback, async, ...rest } = this.props;
if (async) {
return (
<Select.Async
onChange={(val) => {
onChange(val);
callback(val);
}}
value={value}
{...rest}
/>
);
}
return (
<Select
onChange={(val) => {
onChange(val);
callback(val);
}}
value={value}
{...rest}
/>
);
}
With:
let createElement = function(Component) {
return (
<Component onChange={(val) => {
onChange(val);
callback(val);
}}
value={value}
{...rest}
/>
);
};
you can do
let selectAsync = createElement(Select.Async);
let select = createElement(Select);
You can render them in the jsx part with {{select}} and {{selectAsync}}
P.S.: I didnt test this directly, but did something very similar a few days ago, so this approach should work. Note that Component must start with a capital letter.

Categories

Resources