What is the correct react syntax for appending to spread attributes

Question

I'm trying to add "{ "text" :" to the beginning, and "}" to the end of the string.

I've been looking around and playing with different versions of what's below

{'{ "text" : "'+{...propName.props}+'" }'}

Is it even possible to append to a spread attribute?

Adding more information to what Im trying to achieve

An empty propsName.props passes down to an <input type="text"/>

<input
      type="text"
      className="SCSSstuff"
      disabled={loading}
      placeholder="Demo Text"
      autoComplete="off"
      ref="someRef"
      tabIndex={3}
      {...propsName.props}  //<---- 'User Text' gets defined here
      />

I need to pass that down to a hidden input

<input
      type="hidden"
      disabled={loading}
      {...propsName.props} //<-- I need this output to be { "text" : "User Text" }
      />

Question is little unclear but what does your propsName.props contains ? — saurssaurav, Sep 23 '19 at 05:19
@saurssaurav propName.props will contain a user entered value from a text input — freshcoder, Sep 23 '19 at 05:40
if it is a text input then why use a spread operator. You can use template literals(`). in your case : {text: ${propName.props}}. you can add more of your code and description, so that others can understand and help you. — saurssaurav, Sep 23 '19 at 05:53
added some code, hopefully it clarifies what i'm looking to do — freshcoder, Sep 23 '19 at 07:27

score 0 · Answer 1 · answered Sep 23 '19 at 05:53

0

If your props contain user entered value then it should be some primitive type.

You could use template string to achieve the desired result.

const propName = {
    props: 'hey'
}
const templateString = `{ text: ${ propName.props } }`
console.log(templateString) // { text: hey }

Hope that helps!!!

answered Sep 23 '19 at 05:53

tarzen chugh

10,561
4
20
30

Your answer gets me very close! – freshcoder Sep 23 '19 at 06:31
If we knew the input and expected output, we can add more value. – tarzen chugh Sep 23 '19 at 06:35
Updated my question, hopefully it clarifies things – freshcoder Sep 23 '19 at 07:26

What is the correct react syntax for appending to spread attributes

1 Answers1