score:2
this is how javascript works with objects. they are always passed by reference and the others (strings, booleans, numbers as you mentioned) are primitives meaning they are immutable.
there are many amazing answers on so already regarding these:
how do we get around this?
in your snippet, where you say data['name'] = e.target.value
you are still mutating the state object, which is surely a not to do in react. you can read upon power of not mutating content in react docs.
you could create a copy of the test2
and choose to mutate that instead:
const data = {...this.state.test2};
data['name'] = e.target.value
but there is a chance that this function gets called programatically, this will run into an error because setstate
is async. instead it gives us a functional version to deal with:
this.setstate(prevstate => ({
test2: {
...prevstate.test2,
name: value,
}
}));
full demo:
class child extends react.component{
constructor(props){
super(props)
this.state={
test2: this.props.data,
}
this.changetextfield = this.changetextfield.bind(this)
}
changetextfield(e){
const value = e.target.value
this.setstate(prevstate => ({
test2: {
...prevstate.test2,
name: value,
}
}))
}
render(){
return(
<div>
<input type="text" value={this.state.test2['name']} onchange={this.changetextfield}/>
</div>
)
}
}
class parent extends react.component{
constructor(props){
super(props)
this.state={
test: {name: "hola"},
editing: false,
}
this.edit = this.edit.bind(this)
this.cancel = this.cancel.bind(this)
}
edit(){
this.setstate({editing: true})
}
cancel(){
this.setstate({editing: false})
}
render(){
return(
<div>
{(this.state.editing) ?
<react.fragment>
<child data={this.state.test}/>
<button onclick={this.cancel}>cancelar</button>
</react.fragment>
:
<react.fragment>
<h1>{this.state.test['name']}</h1>
<button onclick={this.edit}>edit</button>
</react.fragment>
}
</div>
)
}
}
$(document).ready(function(){
reactdom.render(<parent/>, document.getelementbyid("app"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="parent.jsx" type="text/babel"></script>
</body>
</html>
Source: stackoverflow.com
Related Query
- Passing a JSON as prop in component React JS
- React TypeScript HoC - passing Component as the prop
- Typing React components in Flow when passing a component as a prop
- Passing a function as a prop to a Typescript React Functional Component
- Is passing stringified object as prop in React component better than plain JavaScript object?
- Passing object as a prop of component in react
- React and Redux: Are there any performance issues/possible side effects with passing a parent component as a prop to its children
- React - passing component prop in click handlers passed as props
- Passing a prop from a Parent component becomes null in the Child component React
- Passing a state or prop to pass a value to child component in react
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- Passing Prop to a Component inside React Router in React-router version 5.1.2
- Passing a function as a prop to update state in parent component in react
- Passing prop to react component for customised MUI tooltip value
- Passing prop to react component on test
- Passing an object prop to a React component in a mapping
- Passing JSON data from Django to React component
- Formik: target is undefined when passing Material UI Date Picker as prop to React Component
- React typescript passing function as prop and calling from child component
- Passing entire json like objects to react component as props at one go instead of individual props
- Passing memoized function down into React Component as a prop causes Typescript error which I can't fix
- React JS / Typescript passing an updated prop onChange from one component to another component
- Passing URL of local image as a prop to component in React
- Loading json data with Fetch to pass it to React Component as prop
- Typescript - Restrict passing valid prop to a React component
- React passing a variable to component as a prop
- Passing data from a single JSON file from parent to child component in React using dynamic routes
- React : Callback value received in parent not passing the latest value in another child as prop | Function component
- Getting TypeError: _this2.props.handleClick is not a function when passing redux prop from container to presentational component in react
- React Router - passing Slug as a prop to child Component
More Query from same tag
- Pass locale to axios request
- onclick prepare html when ajax response arrivers and render in react?
- I am unable to get my login page to disappear after I hit "Sign In"
- JS Flow: How to initialize an empty object and set type as an argument to a function?
- cannot display data from firestore in react app
- How do you show expected values of react component props in vscode?
- Typescript Error on super(): expected 1-2 arguments, but got 0
- blueprintjs Select Component onItemSelect Function Doesn't Run
- React: Calling window.print after setstate doesn't work
- POST https://api.jdoodle.com/v1/execute net::ERR_ABORTED 415
- Correct way to update state with react select multiple
- update nested state object with array inside
- Clearing a text field value using a final-form calculator
- state can not set in functional component
- Problems posting images from react to Django Rest API using redux
- reactjs: formik: onSubmit callback function: what parameters i can use
- Can constants be introduced into a ReactJSS stylesheet?
- Handling scroll Animation in React
- How to avoid arrow function while passing prop values to another component?
- Javascript / React - best way to not repeat myself
- React native - dynamically add a view onPress
- How to display multiple lines in Recharts X-Axis tick label?
- How should I render multi-state component, which fetches API?
- gapi this.fl is not a function
- onDargStart eventlistener outputs null values in react
- Filtering state logic for table react for multiple select dropdowns
- Reactjs map works but forEach doesn't
- Querying custom database(Mongodb)
- How to preload a CSS @font-face font that is bundled by webpack4+babel?
- React-query hook imported into a component