(REACT JS) put value on 1 array element from component

Question

I'm trying to give one component the array value at a certain index and assign a value that i want from the child component.

I want it like this because I'm trying to do a survey app and the number of question can be different. this is just a little test that concludes what I want.

the base Component

import React, { useState } from 'react';
import './style.css';
import Comp from './Component.js';
export default function App() {
  const [results, setResults] = useState([]);

  results.length = 20;
  results[3] = 'kiss';
  results[2] = [12, 454, 45];
  console.log(results);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <Comp result={results[5]}/>
      <button onClick={() => console.log(results)}> SHOW </button>
    </div>
  );
}

the component

import React, { useState } from 'react';

 const Comp = ({result}) => {
  result = 1 
  console.log(result)
  return (
    <div>
      hhhhh
    </div>
  );
}

export default Comp

here is a place I set it up => https://stackblitz.com/edit/react-mfpk5f?file=src%2FApp.js,src%2FComponent.js

every suggestion is highly appreciated!

can you elaborate more ? or as per my understanding you can try something like setValue([...value, newvalue]) — debugger
– debugger, Commented Sep 7, 2022 at 9:41
@debugger so I'm making a survey app with 30 question. i want an array where I will keep all my result. 1st question has index 0, question 2 has index 1 ... and so on. if he goes back to the question 3 the value of array at index 2 should change keeping the rest the same — Jurgen Tafaj
– Jurgen Tafaj, Commented Sep 7, 2022 at 9:56

KARTHICK RAVI · Accepted Answer · 2022-09-07 09:59:47Z

0

parent componentHere i have tried a way to find solution , just keep a callback function in child component and call a function of parent component inside child so that u can pass data to it .

child component

edited Sep 7, 2022 at 9:59

answered Sep 7, 2022 at 9:56

KARTHICK RAVI

714 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DBS Over a year ago

Please include code as text, not images.

KARTHICK RAVI Over a year ago

its hard to indent code here so , i will try to do next time

debugger Over a year ago

@KARTHICKRAVI you can copy the stackblitz link and paste in here.

score 0 · Accepted Answer · 2022-09-07 11:03:37Z

If you want to add more, you use the setResults() e.g. setResults(['kiss']); so now your results='kiss', if you want more is setResults(...results,[12, 454, 45]); and now your results= kiss,12,454,45 . But:

import React, { useState } from 'react';
import './style.css';
import Comp from './Component.js';
export default function App() {
const [results, setResults] = useState(['hiii']);

function handleClick() {
   const array1 = 'kiss';
   const array2 = [12, 454, 45];
setResults([...results, array1, array2]);
console.log(results);
}


return (
<div>
  <h1>Hello StackBlitz!</h1>
  <p>Start editing to see some magic happen :)</p>
  <Comp result={results[5]} />
  <button onClick={() => handleClick()}> SHOW </button>
</div>
);
}

First you need to add the values when something happened, e.g. onClick={...}.

<Comp result={results[5]}/> this is correct, but you call when the result=[] show you need to call after updating, e.g.

import React, { useState } from 'react';
import './style.css';
import Comp from './Component.js';
export default function App() {
  const [results, setResults] = useState(['Hi']);

  function handleClick() {
   const array1 = 'kiss';
   const array2 = [12, 454, 45];
   setResults([...results, array1]);
   console.log(results);
  }

 return (
   <div>
    <h1>Hello StackBlitz!</h1>
    <p>Start editing to see some magic happen :)</p>
    <Comp result={results} />
    <button onClick={() => handleClick()}> {results} </button>
    <div>
      {results.map(() => {
        return <Comp result={results[5]} />;
      })}
    </div>
  </div>
  );
 }

Of course this is NOT the best solution, but I hope you understand what happened, and like you will see you need to press the button 5 times to get something for the results[5] <Comp result={results[5]} />

and for the last you need to change the Comp:

 import React, { useState } from 'react';

  const Comp = ({result}) => {
   const [compResults, setcompResults] = useState(result); 
   console.log(compResults)
   return (
     <div>
        {compResults}
    </div>
   );
  }

export default Comp

Collectives™ on Stack Overflow

(REACT JS) put value on 1 array element from component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related