Getting error when I import 'dayjs/local/en'? - javascript

I want to add locale to my react-native-gifted-chat, because the chats do not show up one after the other, I am guessing because of time zones.
I added Locale to my gifted chat:
import en from 'dayjs/locale/en'
render() {
return (
<View style={{backgroundColor: '#000000', flex: 1}}>
<GiftedChat
showUserAvatar={true}
isTyping={this.state.isTyping}
renderUsernameOnMessage={true}
messages={this.state.messages}
onSend={message => this.onSend(message)}
scrollToBottom
locale = { en } <-----------------------------
showAvatarForEveryMessage = {false}
showUserAvatar= {true}
dateFormat = 'll'
timeFormat = 'LT'
placeholder = "Talk to people..."
onPressAvatar={user => this.getProfile(user)}
/>
</View>
)
But now I get the error:
TypeError: undefined is not an object (evaluating 'n[M].replace')
Is this because I am using the wrong type of import, or is the existing chats the issue, and do I need to delete them for things to work?

Looking at the documentation, it appears you need to import the locale file separately.
First you need to import daysjs:
import dayjs from 'dayjs';
Then you need to import the locale you want:
import 'dayjs/locale/en'
This appears to have a global mutation side effect (bad) of making that locale available for formatting.
In your prop, pass in locale="en"
Then in your component (if you own it) you can use dayjs(date).locale(this.props.locale).format()
Daysjs doesn't look like a well designed library, because imports shouldn't have side effects like this.

Related

React and Contentful displaying a .map array

I’ve mimicked a file for creating an array of items from the Contentful dashboard that was built by a previous developer, I’ve inserted the content into the page and added them to the graphQL section to ensure that it’s pulling in some sort of data but when I try and map the array it’s throwing an error as pictured below:
Error in function createFiberFromTypeAndProps
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got object. Check the render method of ValueList.
A couple of things I've looked at online mentioned importing the component via the export default method instead of exporting the function with curly brackets and either way this produces the same results for me. The code I've created is below:
import React from 'react';
import slugify from 'slugify'
import styled from 'styled-components'
import Reveal from 'react-awesome-reveal'
import { BREAKPOINTS, ANIMATION, customReveal } from '../styles/cssVariables'
import Container from './layout/container'
const ValuesStyles = {
backgroundColor: 'black',
textAlign: 'center',
overflow: 'hidden'
}
const ValueItem = {
backgroundColor: 'white',
color: 'black'
}
const ValueList = (props) => {
return (
<Container width={14}>
{props.title}
{props.valuesList.map((value, i) => (
<ValueItem style={ValueItem} key={i}>{value}</ValueItem>
))}
</Container>
)
}
export default ValueList
Have I missed something as I’ve tested that the component itself its passing props but whenever I try and map the array it throws a rendering error? Below is the code that's been added to the container page.
const valueList = get(this, 'props.data.contentfulPageContentStudio.valueList')
<ValueList title="Test Value List" valuesList={valueList}/>

Write JSX outside of a React component (and still transform it into a ReactElement)

I want to define a bunch of data in a constants file which will be used to render a series of React components, including some HTML, which I'd like to be able to write in JSX. Below is a simplified example of what I'd like to do:
// constants.ts
export interface ItemInfo {
title: string;
description: React.ReactElement; // Or whatever this type should be. Just trying to get it working for now, can figure out correct typing later.
}
export const DATA: ItemInfo[] = [
{
title: 'Foo',
// Pseudo code below, how can I get this working?
description: (
<>
<p>Some JSX.</p>
<p>To be rendered in a React component.</p>
</>
),
},
{
title: 'Bar',
description: (
<>
<p>More JSX.</p>
<p>To be rendered in a React component.</p>
</>
),
},
// etc
];
// ItemComponent.tsx
import React from 'react';
import { ItemInfo } from './constants';
const ItemComponent: FC<ItemInfo> = ({title, description}) => (
<div>
<h2>{title}</h2>
<div>{description}</div>
</div>
);
// ListComponent.tsx
import React from 'react';
import { ItemInfo } from './constants';
const ListComponent: FC<ItemInfo[]> = ({items}) => (
<div>
{items.map((item) => <ItemComponent {...item} />)}
</div>
);
I'm using TypeScript, so I've done the simplified example above in TS as well, though I don't think it should matter. I've tried importing React in the constants.ts file, and using React.createElement() on the JSX, but to no avail. I can just move the DATA constant inside of the ListComponent, in which case everything works, but I want to decouple the data from the component, so that it can be used to render different lists of data in different places.
I'm open to suggestions about avoiding using this pattern (in which case please offer reasons why and alternatives), but if it is possible to do this I'd still also like to know how in addition to knowing why I shouldn't and what I should do instead :)
Any insights appreciated, thanks!
Oh, actually I just figured it out. All I had to do was change the constants.ts file to a constants.tsx file.
I'll leave this question up in case it's helpful to anyone else since I didn't find great results when Googling this question (probably because it was such an obvious mistake haha).
If anyone does have comments on whether and why this pattern should or shouldn't be used, I am also still interested.

I'm getting a TypeError on react-useanimations library calling for a toggle button

I'm building a component library and am intending to use of react-useanimations libraries in that. But since I'm pretty new to React I need some help to understand how to implement toggle buttons and events.
The documentation on GitHub set this example for usage in controlled checkboxes - scrolling down, is the second one.
So I'm writing styled (SASS) components that I'd like to use in my library:
// ToggleButton.js
import React, { useState } from 'react';
import UseAnimation from 'react-useanimations';
import { checkBox } from 'react-useanimations/lib/checkBox';
/** #visibleName Botões de seleção
* #version 1.0.0b
*/
function Checkbox() {
const [checked, setChecked] = useState(true);
return (
<div style={{ padding: '20px' }}>
<span>Checkbox</span>
<UseAnimation
reverse={checked}
onClick={() => {
setChecked(!checked);
}}
size={40}
wrapperStyle={{ marginTop: '5px' }}
animation={checkBox}
/>
</div>
)
}
//** Radiobutton class to be writen here
//** Togglebutton class to be writen here
export {
Checkbox
}
I'm using styleguided-framework. It renders a simple example of use, but in the case of this file, ToggleButton.js, I get this
'TypeError': "Cannot read property 'animationData' of undefined".
Not sure of what that means, but I'm guessing the attribute for which animation I'm calling is not going through the component UseAnimation. Not sure why, since I've used it - as in the third example in their GitHub in another project.
What am I missing? Can it be a function? Perhaps some hook I'm not understanding how to use?
It happens that the problem was calling the component <UseAnimation>, which happens to be <UseAnimations> - plural - and importing it with {}. The correct form would be import checkBox from 'react-useanimations/lib/checkBox' since it's the default export.

React (native) - inject custom components instead standard ones in 3rd party code/components

For example i have library/package which exports some component:
function SomeComponent() {
...
return (
<View>
...
<TextInput ... />
...
</View>
);
}
Is there any way I can use SomeComponent but instead of TextInput I somehow inject my custom MyCustomTextInput?
I know that is possible to create SomeComponent with CustomTextInput prop (it does not matter if CustomTextInput default value is specified like this or with defaultProps static initialization):
function SomeComponent({ CustomTextInput = TextInput }) {
...
return (
<View>
...
<CustomTextInput ... />
...
</View>
);
}
What I need is easy way to tell to the whole application (all packages, all our modules/code) "where ever you see TextInput component use my custom MyCustomTextInputComponent". Is this possible in react/react-native?
You can make index for component export package with conditions:
Look at example project:
Example: https://snack.expo.io/#djalik/thrilled-donut
index.js:
import React from 'react';
import {TextInput} from 'react-native';
const MyTextInput=()=>{
return <TextInput value={'custom'}/>
}
const MyTextInput2=()=>{
return <TextInput value={'custom2'}/>
}
let custom1 = false;
export default (custom1?MyTextInput:MyTextInput2);
and import in app where you need it:
import {MyTextInput} from './components'
What you want to achieve (substitute react-native's TextInput with your own component across the entire app) is not possible to do. You can't force library to render another component either (unless it specifically lets you pass that component as a prop). Solution here would be forking this library on github, making necessary changes to support custom component prop and using github link in your package.json file

Cannot read property 'func' of undefined react js?

Hi I am getting this error while implementing date picker
I take help from these URLs:
http://dev.quri.com/react-bootstrap-datetimepicker/
https://github.com/Eonasdan/bootstrap-datetimepicker
here is my code
https://codesandbox.io/s/18941xp52l
render() {
const { date, format, mode, inputFormat } = this.state;
return (
<DateTimeField
dateTime={date}
format={format}
viewMode={mode}
inputFormat={inputFormat}
onChange={this.handleChange}
/>
);
}
react-bootstrap-datetimepicker is an old package. It tries to import PropTypes from React module, however, the export was removed by React team from version 16+.
I suggest you to use alternatives like react-dates.

Categories