Dj Marlins

CodeSandbox example

Here's what I have right now that's rendering: fieldNames

I have a checkbox group that renders `fieldNames`, and each`fieldName` should have it’s own `size` and `lengthType` selection/option. Right now there’s only one selection for both of the values. How can I render individual options to each `fieldName` that is selected? If 2 fieldnames are checked, each one should have size and lengthType
                        <fieldset>                            <legend>Choose field names</legend>                            <br />                            <CheckboxGroup                                checkboxDepth={5}                                name="fieldNames"                                value={this.state.fieldNames}                                onChange={this.fieldNamesChanged}>                                {fields &&                                    fields.map(field => {                                        return <label><Checkbox value={field.name} />{field.name}</label>                                    })}                                <br />                            </CheckboxGroup>                        </fieldset>                        <label>                            Length Type:                        </label>                        <select value={this.state.lengthType} onChange={this.updateLengthType} required>                            <option value="">Select Length Type...</option>                            <option value="fixed">Fixed</option>                            <option value="variable">Variable</option>                        </select>                        <label>                            Size:                        </label>                        <input value={this.state.size} onChange={this.onChange}                            type="number" name="size" placeholder="1" min="0" required />

CheckboxGroup docs: CheckboxGroup

Dj Marlins wrote:Something still seems to be off as it's not populating the list with the schema name.

I have rectified the issue, and it is now working. Thank you for your help/suggestions throughout

Bear Bibeault wrote: If the content of the option and the value are the same, the value attribute can be omitted.

Something still seems to be off as it's not populating the list with the schema name.

Bear Bibeault wrote:P.S. The option element has no key attribute. What are you thinking that it does?

It does not have a key attribute so it only needs the value element. return <option value={schema.name}>{schema.name}</option>; ?

Bear Bibeault wrote: Then the reference would need to be {schema.name}, no?

I have tried this already and is not working. return <option key={schema.name} value={schema}>{schema}</option>;

Bear Bibeault wrote: You use {schema} as the body of the option element. What is it that you expect to appear there when schema is: {  "name": "Phone Record" }

I expect Phone Record to appear within the list selection

As schema is now a data construct (with a name property), what do you expect {schema} to display?
I'm not clear on what you mean.

Bear Bibeault wrote:You'll need to provide more details and your up-to-date code.

There's been a few "minor" changes to URIs so that's reflected below and differs from the original post.

componentDidMount() {    axios      .get("http://localhost:port/querier/api/rest/dataschemas")      .then(response => {        console.log(response);        this.setState({ data: response.data });      })      .catch(error => console.log(error.response));  }

This request is now returning data in a different shape than originally

Response: {    "data": [        {            "name": "Phone Record"        } }    ]

I didn't include it in the snippet but the /dataschemas services returns the same array but there are a few additional fields along with "name".

render() {  const { schemas } = this.props;  return (    <div>      <form onSubmit={this.handleSubmit}>        <label>          Pick the dataschema to describe your data file:          <select onChange={this.handleChange}>            {schemas &&              schemas.length > 0 &&              schemas.map(schema => {                return <option key={schema} value={schema}>{schema}</option>;              })}          </select>        </label>{" "}        <br />      </form>    </div>  ); }

So now, how can I return the name field inside the response.data. I'm thinking value={schema.name}>{schema}</option>; should do the trick. Or do I have to change the initial state of my App

Bear Bibeault wrote:If that's all you have that's all you can use to build your select dropdown.

I still can't seem to get the first string of the array to populate the list

Bear Bibeault wrote:OK, so is an array of strings what you expect as a response?

Yes. For some more detail, the React UI  makes a call to rest service 1, this service then calls rest service 2 where the xml representation is, unmarshal, marshal the payload and returns it to the React UI in the form of json array of strings.

Dj Marlins wrote:

Bear Bibeault wrote:
XML???      

Yes it is XML, I'm seeing it would be easier if it was JSON instead.

This, however is logged in the console

Response: {    "data": [        "Phone Record"    ],

{data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …} config:{adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …} data:Array(1)   0: "Phone Record"   length:1   __proto__: Array(0)

Bear Bibeault wrote:
XML???      

Yes it is XML, I'm seeing it would be easier if it was JSON instead.

<ns2:dataSchemas xmlns="" xmlns:ns2="">   <ns2:dataSchema>     <schemaName>Phone Record</schemaName>     <dataSchemaElement>        <name>action</name>        <dataType>string</dataType>        <isArray>false</isArray>        <position>0</position>        </dataSchemaElement>     <dataSchemaElement>        <name>callee</name>        <dataType>string</dataType>        <isArray>false</isArray>        <position>5</position>        </dataSchemaElement>

This is an example of the dataschema/list Phone Record that is returned by my rest service.