I have seen in react hook forms using as and also render
Eg:
<Controller
render={({ field }) => <input {...field} />}
name="firstName"
control={control}
defaultValue=""
/>
or
<Controller
as={<input .. />}
name="firstName"
control={control}
defaultValue=""
/>
whats the difference
<Controller/> is good to use with there is an external controlled component such (e.g. Material-UI) to wrap the whole component and control is easier.
render is useful when you want to customise the external component while as is just renders the original component. An example of using render could be:
import { TextField } from '#mui/material';
import { Controller } from 'react-hook-form';
const FormTextField = ({
label,
name,
...props
}) => {
return (
<Controller
name={name}
render={({ field, fieldState: { error } }) => (
<TextField
{...field}
label={label}
error={!!error}
helperText={error ? error?.message : ''}
/>
)}
{...props}
/>
);
};
As you can see, render gives you ability to access different values (such as error) in the Material UI component which is not easy to do with as.
Read more about what properties you have access in render at https://react-hook-form.com/api/usecontroller/controller
This example is also helpful: https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5
Is there a better way to do this?
<script>
import recipeStore from '../../recipeStore';
export let id; /* I got this id from the url param */
</script>
<div>
{#each $recipeStore as recipe }
{#if recipe.id == id}
<p>{recipe.name}</p>
{/if}
{/each}
</div>
Thanks!
You can filter your store-data inside the script tag:
<script>
import {counts} from "./store.js"
let id=0;
let mycounts
const filt=(value)=>{
mycounts=$counts.filter(count => count.id == id);
console.log("mycounts: ",mycounts)
}
$: filt(id)
</script>
You can use $: to observe the change in a variable. In my example when id changes the filt(id) function is called.
Here is REPL: https://svelte.dev/repl/77f92f3d3ca149dfa5475035cbbffeb5?version=3.29.0
A piece of react-native code:
enderScene(route, navigator) {
let Component = route.component;
return (
<Component {...route.params} navigator={navigator}></Component>
);
}
this code returns a Component Object ,
But I don't understand this code ---> {...route.params}
Question：
What is meant by '...' ?
Can you tell me what is meant by " {...route.params}" ?
The '...' is called Spread syntax.
The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.
Example :
var car = ["door", "motor", "wheels"];
var truck = [...car, "something", "biggerthancar"];
// truck = ["door", "motor", "wheels", "something", "biggerthancar"]
If you want to know more about spread operator :
https://rainsoft.io/how-three-dots-changed-javascript/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
To expand on the above, in the context of the original post the spread operator is essentially passing through all of the parameters in route.params
For example if route.params was the object
{key: 'my-route', title: 'My Route Title'}
Then
<Component {...route.params} navigator={navigator} />
Could be re-written as
<Component key={route.params.key} title={route.params.title} navigator={navigator} />
The other "side" of this is the destructuring assignment (example using stateless react components)
const Component = (props) => {
// this is simply referencing the property by the object key
let myKey = props.key
// this is using destructuring and results in the variables key, title and navigator which are from props.key, props.title and props.navigator
let { key, title, navigator } = props
return <Text>{title}</Text>
}
You can also do this in the function declaration like so which achieves the same thing
const Component = ({key, title, navigator}) => {
// now you have variables key, title and navigator
return <Text>{title}</Text>
}
See Destructuring
Ok, I was confused about that for a long period of time.
So, I'll try my best to explain it to you:
Suppose, you've a react class like bellow:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
class SingleService extends Component{
render(){
return(
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class={`fas ${this.props.icon} fa-stack-1x fa-inverse`}></i>
</span>
<h4 class="service-heading">{this.props.title}</h4>
<p class="text-muted">{this.props.description}</p>
</div>
);
}
}
export default SingleService;
Here, you can see that there are so many {this.props.variable}.
Those are used to create dynamic values when we import this above class into another class, like bellow:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import SingleService from './SingleService';
// declaring a constant array to hold all of our services props.
// The following array is made up of the objects.
const services = [
{
title:'E-commerce',
description:'Description text on E-commerce',
icon: 'fa-shopping-cart'
}
];
class Services extends Component{
render(){
return(
<div>
<section class="page-section" id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
{/* it's looping through an object, that's why we've used key value pair. */}
{ /*
to write js inside JSX, we use curly braces
here we're using array.map() function.
*/}
{services.map((service, index) => {
// returning our component with props.
// return (<SingleService title={service.title} description={service.description} icon={service.icon} />);
// or, we can write the following
return (<SingleService {...service}/>);
})}
</div>
</div>
</section>
</div>
);
}
}
export default Services;
Now, here, I've used the famous
return (<SingleService {...SingleService}/>);
But one very important thing, I could avoid using it simply by writing the following line:
return (<SingleService title={service.title} description={service.description} icon={service.icon} />);
So, you can see in the send return statement, I've specified all of the props variables individually and assigned values to those, whereas in the first return statement, I've passed in all pf the props together from the SingleService object at once, that will pass all od the key-value pairs.
To add to the above given answers, the ... or the spread operator is not something special to react native. It is a feature in es6. ES6 stands for ecma script and is the standard followed for javascript. This means that you could create a .js file outside of react/react-native and run it in a node env and the spread operator would still work.
How do I write a numeric for loop in a polymer custom element template? I mean something like
<template repeat="{{for i = 1 to 10}}">
<div>item</td>
</template>
Is it possible in the current version of Dart 1.0?
Currently no, this is not possible in Polymer.dart (or Polymer.js to my knowledge). The repeat binding requires an iterable (See Repeating Templates section of the Polymer_expressions library). Unfortunately due to Issue 12669 it is also not possible to use a list literal to accomplish this either.
Using a filter we can accomplish this:
<!-- myelement.html -->
<polymer-element name="my-element">
<template>
<div>
<template repeat="{{ 5 | myFilter }}">
<p>Write me {{ }}</p>
</template>
</div>
</template>
<script type="application/dart" src="myelement.dart"></script>
</polymer-element>
// myelement.dart
import 'package:polymer/polymer.dart';
import 'package:polymer_expressions/filter.dart';
#CustomTag('my-element')
class MyElement extends PolymerElement {
final Transformer myFilter = new GenerateIterable();
MyElement.created() : super.created();
}
class GenerateIterable extends Transformer<Iterable, int> {
int reverse(Iterable i) => i.length;
Iterable forward(int i) => new Iterable.generate(i, (j) => j + 1);
}
Creating a page which imports myelement.html and using <my-element></my-element> will output:
<div>
<p>Write me 1</p>
<p>Write me 2</p>
<p>Write me 3</p>
<p>Write me 4</p>
<p>Write me 5</p>
</div>
I have a template:
<element name="x-my-elem" constructor="MyElem" extends="div">
<template>
<div>
<button on-click="onClick()"> Button </button>
<div id="displayMe">
</div>
</div>
</template>
</element>
And script:
class MyElem {
onClick {
query("#displayMe").innerHtml = "hello";
}
}
Now, there are multiple instances of the component in the html file:
<div is="x-my-elem" id="p1" ></div>
<div is="x-my-elem" id="p2" ></div>
...
I want each button to change only "displayMe" that belong to it. How to achieve it?
Is there a way to generate unique Ids? Something better then this.elements[i] ?
First, I think you should prefer classes to id's for component internals, because you can have multiple instances of the component, as you do here.
Either way, the way to scope your query to the component is to use this.query() instead of query(), like so:
class MyElem {
onClick {
this.query(".displayMe").innerHtml = "hello";
}
}