We Keep Coding

get synatx error from writing javascript destructure with export function

I have a index.ts file for export libary, but I got error message like below, what's wrong overhere?, I thought it should work.
// components
import List from './components/List'
import Item from './components/Item'
// containers
import ListStackConatiner from './containers/ListStackConatiner'
const components = {
List,
Item
}
const containers = {
ListStackConatiner
}
export {
...components,
...containers
}
SyntaxError: /somepath/src/index.ts: Unexpected token (17:2)(line in ...components)

You can't do destructuring inside a named export natively - this answer explains why. Instead, you can use Object.assign:
export default Object.assign({}, components, containers);
You could also destructure into another variable, then just export that:
var exportObj = {
...components,
...containers
};
export default {exportObj};

Use
export = {
...components,
...containers
}
instead.

Es6 Destructuring

I have a file that is similar to this:
const COLORS = {
PRIMARY_COLOR: 'red',
SECONDARY_COLOR: 'green'
};
const APP = {
APP_COLOR: GRAY_DARK,
APP_FONT_SIZE: FONT_SIZE_NORMAL,
APP_FONT_WEIGHT: FONT_WEIGHT_NORMAL,
APP_SEPARATOR_COLOR: GRAY_LIGHT
};
export default {
...COLORS,
...APP
};
The issue is when I'm trying to destructure that object from another file, I get undefined values?
import theme, { PRIMARY_COLOR } from '../../../themes/default';
printing the theme object works fine
but printing PRIMARY_COLOR gets undefined
Any help?

The {} syntax in imports is for "named" imports and is not destructuring.
Just do this:
import theme from '../../../themes/default';
const { PRIMARY_COLOR } = theme;

To understand the difference, you first need to know the way they are exported.
In case of React, the export goes something like this
const Component = ...
...
...
export Component;
This becomes available under React.Component and you can import it like import { Component } from 'react';
The way these look under the microscope is:
default.Component
...
While everything else is just under the default object.
If you do a quick console.log of theme, you'll understand what I mean.
I hope this makes sense.
Let's go a little in depth.
Suppose you have the following bit of code:
const a = {
test: 'hello',
};
const b = {
foo: 'bar',
}
export default a;
Now, let's import that
import * as theme from './test.js'
When we do a console.log( theme ) we get
{ default: { test: 'hello' } }
What does this show? It means that the export object of a file contains a default property which is automatically loaded into memory when we do something like import theme from 'test'. However, if you have more than one export, the compiler gives you the option to pick and choose, but at the same time, provides you with a default object just for fall back.
In your case, you have exported everything under the default. When you do import theme from './theme' all works fine. However, when you do { PRIMARY_COLOR }... it tries to find something which was exported like
export PRIMARY_COLOR...
I hope this makes it clear! :)

Why cannot I not use connect in my React Native component?

I have a component that I need to call dispatch in (this.props.dispatch) but dispatch doesn't exist so I decided to add a connect to my component but I get an error when I do so. I am having trouble trying to figure out why adding a connect would throw an error when other components in my app also have a connect and don't act like this. If I remove the connect line then the error disappears. Does anyone know why I'm getting this error??
export default class ItemsInCartContent extends Component {
constructor(props) {
super(props);
this.state = {
active: null,
products: props.products,
ascending: true,
sortIcon: 'unsorted',
sortIconStyle: styles.sortIcon
};
this.props.dispatch(getOrderDetails(this.props.orderId));
}
render() {
const cartIcon = (<Icon name="shopping-cart" style={styles.cartIcon} />);
const sortIcon = (<Icon name={this.state.sortIcon} style={this.state.sortIconStyle} />);
return (
<View style={styles.itemsInCartContent}>
</View>
);
}
}
function mapStateToProps(state) {
const {products} = state;
return {
products
};
}
export default connect(mapStateToProps)(ItemsInCartContent);

The error is pretty clear if you read the log carefully:
... SyntaxError ... only one default export allowed per module ...
You got
export default class ItemsInCartContent extends Component {
and
export default connect(mapStateToProps)(ItemsInCartContent);
only one of those exports can be default.
I would advise to remove the export on ItemsInCartContent completely since the component is supposed to be used with connect, or, make it explicit:
export class ItemsInCartContent extends Component {

export default arrow function cannot be imported

I'm using React, and I have something like this in my code:
renderDetails.js:
export default renderDetails = (details) => {
// function logic removed for brevity
}
Then, in the same folder, I have another source file from where I want to import it, and I do something like this:
businessDetails.js:
import renderDetails from './renderDetails';
// rest removed for brevity
But, I get an error message pointing to my renderDetails.js file and says: "rederDetails is not defined". Any ideas what the problem might be and how to fix it?

The problem is that even though you are exporting the component as default you are giving it a name which is not defined
You can either do
export default (details) => {
}
or
const renderDetails = (details) => {
}
export default renderDetails;
One more thing, when you are trying to render components, make sure that their name starts with a Uppercase character.

try that way.
functions.jsx
export function renderDetails(details) => {
// function logic removed for brevity
}
then import like,
import { renderDetails } from './functions';
P.S.
./ is for if both files a re in same namespace/folder.

You can also write them like this:
export const exampleFunctionOne = () => {}
export const exampleFunctionTwo = () => {}
Then import the individual functions you require from said file like this:
import { exampleFunctionOne, exampleFunctionTwo } from './exampleFile';
I like this approach when wanting to combine similar functions into one file such as validators or filters making them easy to import and use across your application.

React properties/function assignment/declaration

I'm new to React, but not to JS.
Here's a piece of code, that I couldn't understand
// #flow
import React, { Component } from 'react';
import ShowCard from './ShowCard';
import Header from './Header';
class Search extends Component {
state = {
searchTerm: ''
};
props: {
shows: Array<Show>
};
handleSearchTermChange = (event: SyntheticKeyboardEvent & {target: HTMLInputElement}) => {
this.setState({ searchTerm: event.target.value });
};
render() {
return (
<div className="search"></div>
);
}
}
export default Search;
Within the class there are expressions like state = ... and props: {...
Also function definitions like render(){} and handleSearchTermChange = (....
As I recall from all these valid ES6 one is render. How does it work? If I switch the way data assigned to state/props - everything brakes. I assume it's some kind of babel plugin, is it?

Yes, you're right.
The react docs usually defines state via the constructor() {} object. However, in certain projects, we can simply do so via state = {}. This shorthand syntax is possible due to a Babel transpiler called Class properties transform.