I'm trying to load a Material-UI TextField #material-ui/core": "^4.9.11" with a default value string that contains a \n (new line escape character).
However, I don't get the text in the defaultValue to fall on two lines. The \n escape is just included in the field. So I want to pass a string that contains a \n to the defaultValue and have it go on two lines of the TextField.
import React from "react";
import "./styles.css";
import TextField from "#material-ui/core/TextField";
export default function App() {
return (
<div className="App">
<TextField multiline rows={2} defaultValue="Line1\nLine2" />
</div>
);
}
I've got a codesandbox of this here
You can use a variable for that:
const val = "Line1\nLine2";
return (
<div className="App">
<TextField multiline rows={2} defaultValue={val} />
</div>
);
If you use the string as the value for the property - react will see it a a final string (and not as js string), which means your string is actually "Line1\\nLine2".
To solve this just use a js-string (using a variable, like in the example above) or pass the value of your string as an object:
return (
<div className="App">
<TextField multiline rows={2} defaultValue={"Line1\nLine2} />
</div>
);
Related
I am trying to get and modify a date value, I get the date value from mongoose, I correctly get the value, and I can modify it correctly, but moongoose give me the date in this format :
YYYY-MM-DDT00:00:00.000Z,
So I want to change the display value with an Italian format, like: DD/MM/YYYY.
I have try with this:
<template>
<div class="col">
<span> Date </span>
<input
:value="birth" v-on:input="birth = $event.target.value" type="date" />
</div>
</template>
<script>
import DataService from '#/services/DataService'
import ClickToEdit from '#/components/ClickToEdit'
import moment from 'moment'
export default {
name: 'Options',
data: function() {
return {
birth: '',
}
},
methods: {
async getAllInfo() {
var userInfo = await DataService.getInfoFromSomeWhere({
})
this.birth = this.frontEndDateFormat(userInfo.data.user[0].birth)
},
frontEndDateFormat: function(date) {
return moment(date, 'YYYY-MM-DDT00:00:00.000Z').format('DD/MM/YYYY')
}
},
mounted() {
this.getAllInfo()
}
}
</script>
The date was correctly changed, but the vue page didn't display the date value, and I think is because the default input value display the date in this way :
gg/mm/aaaa
I have already try to change the frontEndDateFormat method with gg/mm/aaaa instead of DD/MM/YYYY, but If I do this I have a strange value in input, like gg/00/amamamama ( I think the problem is related to moment).
So I tried to use :
<input :value="birth" v-on:input="birth = $event.target.value" type="date" v-model="date" />
But If I get an error:
:value="birth" conflicts with v-model on the same element because the
latter already expands to a value binding internally
What am I doing wrong? Thank you
Once i select a dropdown value from a dropdown field i want a section in another div to be loaded
ngif would help me do this, but how could i add this as a condition for the display of that section
Any dropdown selected should open that section
Later would customise it to different other sections in a div to load based on selection of the different dropdowns values accordingly
This can be solve by using selectionchange event emmiter function, whenever you select a value from the dropdown you can call an eventemmiter function. See the code below:
Html Code:
<div>
<mat-select placeholder="Options"
(selectionChange)="onSelecetionChange($event.value)">
<mat-option value="individual ">Individual </mat-option>
<mat-option value="business">Business</mat-option>
</mat-select>
</div>
<div *ngIf="individual">
Individual Div
</div>
<div *ngIf="business">
Business Div
</div>
My ts code:
individual: boolean;
business: boolean;
onSelecetionChange( value: string ) {
if( value === 'individual') {
// You can add some service call or customize your data from here
this.individual = true;
}
if( value === 'business') {
// You can add some service call or customize your data from here
this.business = true;
}
}
Is it possible to use a variable in <div> with newline inside?
class Hello extends React.Component {
render() {
const texts = {
subHeaderText: 'first line \n second line'
};
return <div>{texts.subHeaderText}</div>;
}
}
I wish to result
first line
second line
What is the simplest way?
https://jsfiddle.net/69z2wepo/263117/
You can use p (paragraph) tags.
check out this site:
https://forum.freecodecamp.org/t/newline-in-react-string-solved/68484/7
div{
white-space: pre-line;
}
Add this to the css file of your html. This will automatically create line breaks whenever /n or <br> are encountered. This is the simplest way.
As a recommendation, since it looks like a hardcode you might as well use two separate <p> or <div> for both like so:
<div>
<p>
first line
</p>
<p>
second line
</p>
</div>
It's just much more elegant that way unless you really want to display line breaks from input. Given that you may also approach it in a js way like so:
texts.subHeaderText.split('\n').map((item, i) => {
return <p key={i}>{item}</p>;
});
I want to stote dates in my state using redux-form. I use react-datepicker. To make the datepicker compatible with my redux-form i write:
import React, { PropTypes } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
const MyDatePicker = ({ input, meta: { touched, error } }) => (
<div>
<DatePicker
{...input} dateFormat="YYYY-MM-DD"
selected={input.value ? moment(input.value) : null}
/>
{
touched && error &&
<span className="error">
{error}
</span>
}
</div>
);
MyDatePicker.propTypes = {
input: PropTypes.shape().isRequired,
meta: PropTypes.shape().isRequired
};
export default MyDatePicker;
The problem is that when i choose date i want it to show as DD-MM-YYYY but i want the date to be saved in my state with the YYYY-MM-DD HH:MM:SS format. How to do this? I use the moment's format function but it did not seem to work
You should use the value lifecycle methods that redux-form provides for this.
Use parse to format the value coming from react-datepicker for storage and format to parse the value from the store back for react-datepicker to present it. Example:
function formatDateForInput(storedDate) {
// the returned value will be available as `input.value`
return moment(pickedDate).format('right format for your input')
}
function parseDateForStore(pickedDate) {
// the returned value will be stored in the redux store
return moment(storedDate).format('desired format for storage')
}
<Field
component={ MyDatePicker }
format={ formatDateForInput }
parse={ parseDateForStore }
/>
If this does not work for your, I would recommend checking if you need to put a custom onChange handler between the DatePicker and input prop provided by redux-form. Because it could be that the values DatePicker is using to call onChange are ones that redux-form does not understand. Like this:
const MyDatePicker = ({ input, meta: { touched, error } }) => {
const onChange = event => {
const pickedDate = event.path.to.value;
input.onChange(pickedDate);
}
return (
<div>
<DatePicker
dateFormat="YYYY-MM-DD"
selected={input.value ? moment(input.value) : null}
onChange={ onChange }
/>
{
touched && error &&
<span className="error">
{error}
</span>
}
</div>
);
}
MyDatePicker.propTypes = {
input: PropTypes.shape().isRequired,
meta: PropTypes.shape().isRequired
};
export default MyDatePicker;
Hope this helps!
If i am understanding correct you just need 2 different formats for same date one on UI and other to save ? moment(date).format('DD-MM-YYYY') and moment(date).format('YYYY-MM-DD HH:MM:SS') will give you both formats date.
Just use the prop dateFormat="dd/MM/yyyy"
Example :
<DatePicker
selected={startDate}
onChange={date => handleChange(date)}
dateFormat="DD/MM/YYYY"
/>
I used the below props -mask, inputFormat and format - to change the default format to "yyyy-MM-dd" format.
The format code "yyyy-MM-dd" is important, play around this to find the desired format.
Example:
<LocalizationProvider dateAdapter={AdapterDateFns} >
<DatePicker
label="SomeDate"
{...register("details_received_date")}
mask="____-__-__"
inputFormat="yyyy-MM-dd"
format="yyyy-MM-dd"
value={someDate}
onChange={(newValue) => {setSomeDate(newValue);}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
This will display in the front end and provide the value as well in the desired format.
Hope this helps.
Try this
inputFormat="DD/MM/YYYY"
const [value, setValue] = useState(null);
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="DatePicker Example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
inputFormat="DD/MM/YYYY"
/>
</LocalizationProvider>
i want to create a field using redux form which will contains a "readOnly" box which will have a default value.
So im writing
<Field id="current-password"
name="current-password"
type="text"
readOnly="readOnly"
component={inputField}>
value={userNumber}
</Field>
The userNumber is a prop.
The inputField is:
i
mport React from 'react';
import { Input } from 'reactstrap';
export default field => (
<div>
<Input {...field.input} type={field.type}>
{field.children}
</Input>
{field.meta.touched && field.meta.error &&
<span className="error">{field.meta.error}</span>}
</div>
);
My layout is like this:
When my component is render i want it to appear like this. The problem is that the "value" prop is not assigned.
How to solve this?
Consider mapping state to the initialValues prop in your form declaration.
Here's how I did it:
function mapStateToProps(state) {
return {
request: state.request,
initialValues: state.auth,
};
}
A fully documented example is here Initialize From State